

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

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

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

[code]

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

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


CC BY-SA 4.0
2022-02-04T00:11:50.470
86131
2022-02-04T09:20:52.650
2022-02-04T08:49:49.713
51253
51253
question
javascript html jquery
jqueryでサイドバーのリンククリックによるスムーススクロールをしたい


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

[code]

        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);
        });
    
[/code]


CC BY-SA 4.0
2022-02-04T09:20:52.650
86145
2022-02-04T09:20:52.650
51253
86131
answer