0

jsfiddleをご覧ください。:https://jsfiddle.net/ac189xhn/

メインコンテンツを掲載する部分とサイドバーの2か所からなるページを作ります。
サイドバーのリンクをクリックすると、そのhrefに記載したidと同じメインコンテンツのsectionタグへとスムーススクロールできるようにしたいのですが、現状ですと2回同じリンクをクリックした時や、2回目以降のいずれかのリンクをクリックした際に予期せぬところへスクロールしてしまいます。

同じリンクを何回クリックしても同じ場所に留まり、この現象が発生するときには、下記のdestination.offset().topが取得する値が親要素の一番上からの距離ではなく、"ブラウザ画面"の一番上からの距離を取ってしまっていることが原因だと推測できました。

$(".content").animate({
        scrollTop: destination.offset().top,
    },
    "slow"
);

そこまでは分かったのですが、どうすれば正しい挙動にできるのでしょうか?

4
  • destinationはどこで宣言されていてどういったものが入っている変数でしょうか?Javascript標準のグローバル環境変数でもjQueryのプロパティでもなさそうですが。。
    – keitaro_so
    Commented 2022年2月4日 5:55
  • ちなみに、最近はIEを除けばほとんどの環境ではCSSや標準のscrollToで適確なスムーススクロールが利用可能ですがjQueryでやりたい理由とかはありますか?
    – hinaloe
    Commented 2022年2月4日 5:57
  • @keitaro_so 大変失礼しました。jsfiddleのURLを置くのを忘れておりました…質問内容に掲載しました。
    – sttns
    Commented 2022年2月4日 8:50
  • @hinaloe そんなにこだわりはないです!代替案ありましたら教えてくださいますと幸いです!
    – sttns
    Commented 2022年2月4日 9:12

1 件の回答 1

0

自己解決しました。
var sh = $(".content").scrollTop();
でスクロールする要素の現在位置を取得したうえで、
スクロール先の要素のdestination.offset().topと足し算することで、正しい挙動にできました。
解決後のjsfiddle↓
https://jsfiddle.net/zok428uq/

    function scrollToAnchor(aid) {
        const destination = $("section[id='" + aid + "']");
        var sh = $(".content").scrollTop();
        $(".content").animate({
                scrollTop: destination.offset().top + sh,
            },
            "slow"
        );
    }

    $(document).on("click", ".sidebar a", function() {
        var anchor = this.hash.replace("#", "");
        scrollToAnchor(anchor);
    });

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。