jQuery 固定ヘッダーでのページ内リンクスムーズスクロールのずれ

Question

自身のポートフォリオサイト（1ページ）をつくっていて、ページ内リンクでスムーズスクロールするようにjQueryを使っています。

$('a[href^="#"]').click(function() {
let speed = 500;
let href = $(this).attr("href");
let target = $(href === "#" || href === "" ? 'html' : href);
let position = target.offset().top;
$('html, body').animate({scrollTop:position}, speed, 'swing');
return false;
});

ヘッダーを固定しているので、これだとヘッダーに隠れてしまいます。それ以外はうまく動作します。
そこで、よくあるコードで

$('a[href^="#"]').click(function() {
const headerHieght = $('header').height();　//ヘッダーの高さ取得
let speed = 500;
let href = $(this).attr("href");
let target = $(href === "#" || href === "" ? 'html' : href);
let position = target.offset().top - headerHieght;
$('html, body').animate({scrollTop:position}, speed, 'swing');
return false;
});

このように書きました。

しかしクリックした後、固定ヘッダーの高さを考慮してスクロールで移動してくれるのですが、その後すぐにスクロールされて、リンクの先頭がヘッダーに隠れてしまいます。

どうすればよいでしょうか？

Comments

[stylish_shield]

CSSを使えばできるようですが、出来ればJSのみで書きたかったです。
何故ズレるのか理由がわかれば教えていただけると幸いです。

Answer 1

質問から大分経っていらっしゃるのでもう不要かもしれませんが、まだ閉じられていらっしゃらないので書いておきますね。

私も全く同じ現象で詰まっておりました。
私の場合、ページに記載されていたsmoothscroll.jsと競合を起こしていた為でした。
もしページの中にsmoothscroll.jsがあればそちらを消すか、
html内にあるページ内リンク部分のaタグにclass="noscroll"を入れてsmoothscroll.jsからの影響を受けなくするかで解決出来るかもしれません。

一応例置いておきます

<div><a href="#link01">リンク1へ</a></div> <div><a href="#link02">リンク2へ</a></div> ↓ <div><a href="#link01" class="noscroll">リンク1へ</a></div> <div><a href="#link02" class="noscroll">リンク2へ</a></div>

あとはsmoothscroll.jsの2020verがあるそうなので、そちらを使用されると競合は起こらないようです。

私の場合はこれが原因でしたが、もしこれで解決されましたら幸いです。
駄目でしたらお役に立てず申し訳ありません。

Answer 2

質問されてからちょっと日にちが経っているので、もう解決されてるかもですが、まだ閉じられてないので一応書いておきますね。

なぜ2段階のスクロールという挙動になるのかですが、aをクリックすると、元々のhtmlの機能としてhrefに書かれた場所にジャンプするようになっているので、jQueryのクリックイベントでもジャンプ機能が働くことで、ダブルジャンプとなってしまうからです。

従って、htmlの方の本来のジャンプを起こさせないようにする必要があるのです。

なのでこの部分

$('a[href^="#"]').click(function() {

をこのように↓

$('a[href^="#"]').on('click',function(e){
   e.preventDefault();

としてみてください。

Comments

[stylish_shield]

回答ありがとうございます。
$('a[href^="#"]').on('click',function(e){
e.preventDefault();
としても、二段階でスクロールしてしまい、結局狙った挙動（ヘッダーの高さを考慮して下にずれる）は得られませんでした。

[mari.rinn]

ブラウザのキャッシュはクリアされましたか？

[stylish_shield]

しましたが、できませんでした

[mari.rinn]

う〜〜ん、挙動からして絶対にこれだと思ったのですが変わりませんか。

そしたら

$('html, body').animate({scrollTop:position}, speed, 'swing');

これを

$('html, body').stop().animate({scrollTop:position}, speed, 'swing');

とするとどうなりますか？あ、ちなみに、
$('a[href^="#"]').on('click',function(e){
e.preventDefault();　
はつけたままにしといてください。

これでも変わらない場合は申し訳ないですが私にはわかりません。お役に立てずごめんなさい。

Answer 3

アンカー先の要素にCSSをあてて調整するのはいかがでしょうか。

<div id="hoge" class="anchor"></div>
<section>
～
</section>

.anchor{
 display:block;
 width:0;
 height:0;
 margin-top: -100px; //固定ヘッダーの高さ
 paddiing-top: 100px; //固定ヘッダーの高さ
}

レスポンシブなどの理由でヘッダーの高さが定まらずCSSで指定できない場合は、
JSの記述を流用してアンカーリンクをクリックした時などに高さを取得し、
anchorに直接styleを当ててあげれば対応できると思います。