このブログを書いた人:「cuff links」 category:Jquery (748)

スムーススクロールが上手く行かないのはCSSのせいかもしれない

WordPressでリンクのスムーススクロールを実装中に引っかかったので残しておきます。

よくある実装コードがこちら

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

speedでスクロール時間を指定、href・tagetでスクロール先を取得・指定、positionでスクロール量を測定、
animateでスクロールさせるというもの。

WordPressを使用している方は$が競合して使えないので
jQuery(document).ready(function($){});で囲うとこの記述が使用可能になります。

つまりこう

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

もしくは$を jQuery に変える

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

実装画面はこんな感じ

See the Pen yLLNpJr by cuff links (@cuff_links) on CodePen.

ここまではOKだと思います。
が、私はなぜか上手く行かずにクリックすると行ったり来たり。
コンソールで確認するとスクロール先の数値は拾えているが、

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

どうもこの部分で数値が入れ替わるような感じに。「スムーススクロール 効かない」でググってもいまいち。半日さまよってやっと見つけました。

こちら

chromeでscrollTop()が効かない、取得できない現象に遭遇

https://se.ykysd.com/2017/04/27/chrome-scrolltop/

どうやらCSSで html,body に高さ100%を指定していたことが原因。
取り除くと綺麗に動きました。

しかし私の環境ではどうしても高さに100%を付ける必要がありました。(ajaxローディングの表示が崩れる)
そこで

html,body {
  height: 100vh;
}

に変えてみると今度こそ成功。上手くいきました。

bodyに100%を指定することは無いかもしれませんがどうしても必要な方はこの方法をとってみては如何でしょうか。

コメントをする