jsfiddleをご覧ください。:https://jsfiddle.net/ac189xhn/
メインコンテンツを掲載する部分とサイドバーの2か所からなるページを作ります。
サイドバーのリンクをクリックすると、そのhrefに記載したidと同じメインコンテンツのsectionタグへとスムーススクロールできるようにしたいのですが、現状ですと2回同じリンクをクリックした時や、2回目以降のいずれかのリンクをクリックした際に予期せぬところへスクロールしてしまいます。
同じリンクを何回クリックしても同じ場所に留まり、この現象が発生するときには、下記のdestination.offset().top
が取得する値が親要素の一番上からの距離ではなく、"ブラウザ画面"の一番上からの距離を取ってしまっていることが原因だと推測できました。
$(".content").animate({
scrollTop: destination.offset().top,
},
"slow"
);
そこまでは分かったのですが、どうすれば正しい挙動にできるのでしょうか?