JavaScript
2021年10月22日

CSSが原因でjQueryのスムーススクロールが効かない

もう100万回くらいコードを見返しても記述ミスは無く、全く原因が分からず途方に暮れていました。

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

        var href = jQuery(this).attr("href"),
            target = jQuery(href == "#" || href == "" ? 'html' : href),
            position = target.offset().top;

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

上記の様なコードです。

最後のreturnをtrueに変更するとジャンプはするけどスムーススクロールでは無くなります。

で、原因はとてもシンプルでした。

htmlに以下のCSSが設定されていたのが原因でした。

html{
  overflow-x: hidden;
}

htmlにoverflowが指定されているとChrome、FireFoxともに微動だもしません。

で、この指定を外せば普通に動作してくれましたとさ。

Tags
#jQuery