スムーススクロール導入時のページ外リンク

Question

Wordpressのヘッダー部分に、スムーススクロールを導入しております。
トップページからリンクを押したときに、下層ページの該当箇所に飛ばしたいのですが、
上手く行かずに困っています。

導入しているのは下記記述です。
助けていただけないでしょうか…？

◆導入しているスムーススクロール

jQuery(document).ready(function ($) {
         // ------------------------------------- //
                // スムーズなページ内リンク
                // ------------------------------------- //

                // #で始まるアンカーをクリックした場合に処理
                $('a[href^="#"]').click(function () {
                    // スクロールの速度
                    var speed = 400; // ミリ秒
                    // アンカーの値取得
                    var href = $(this).attr("href");
                    // 移動先を取得
                    var target = $(href == "#" || href == "" ? 'html' : href);
                    // 移動先を数値で取得
                    var position = target.offset().top;
                    // スムーススクロール
                    $('body,html').animate({scrollTop: position}, speed, 'swing');
                    return false;
                });
});

◆トップページでの記述

<a href="/about/#merit_1/">
                <div class="box no1 inline_child">
                    <p class="img">
                        <img src="/img/school/top/merit_1_img.jpg" alt="test">
                    </p>
                    <p class="catch text-center">
                        タイトル
                    </p>
                </div>
            </a>

◆飛び先ページでの記述

<!-- 魅力1:常に最先端の技術 -->
            <div class="box no1 inline_child" id="merit_1">
                <p class="img">
                    <img src="/img/school/top/merit_1_img.jpg" alt="test">
                </p>
                <p class="catch text-center">
                    タイトル
                </p>
                <div class="txt">
                   文章
                </div>
            </div>

Comments

[kei344]

飛び先ページに着いた後スクロールする挙動にしたいのでしょうか。それとも飛び先ページ当該idに直接到達しても良いのでしょうか。

Answer 1

リンク指定が問題では？
href="/about/#merit_1/" だと、「aboutディレクトリ」「#merit_1ディレクトリ」の
index.htmlだかを探してしまいますよね？
なので、「about/index.html#merit_1」とかでいけると思います。
index.html部分は、該当のページファイルを指定します。