ページ内リンクへのスムーススクロール

jQuery

通常、ページ内リンクをクリックするとパッとその場所へ移動します。

最近のサイトには導入されているものが多い、スクロールするように移動する機能を追加するjqueryコードです。

 

動作サンプル

下に移動します

 

 

コードはこちら

jQueryを使用しますので、jQuery本体も読み込んでください。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
<script>
$(function(){
   // 表示位置をずらす
   var headH = 100;
   
   // #で始まるアンカーをクリックした場合に処理
   $('a[href^="#"]').click(function() {
      // スクロールの速度
      var speed = "slow";// ミリ秒
      // アンカーの値取得
      var href= $(this).attr("href");
      // 移動先を取得
      var target = $(href == "#" || href == "" ? 'html' : href);
      // 移動先を数値で取得
      var position = target.offset().top - headH;
      // スムーススクロール
      $("html,body").animate({scrollTop:position}, speed, 'swing');
      return false;
   });
});
</script>

 

 

<!--リンク元-->
<a href="#sample">下に移動します</a>

<!--リンク先-->
<div id="sample">ここに移動します</div>

 

 

 

 

 

 

ここに移動します

 

 

wordpressに設置する場合は、ほかのjsライブラリと衝突していまい、このままだと動きません。

 

その場合は、下記のように「(function($) {」と「})(jQuery);」で囲ってください。

 

(function($) {

$(function(){
   // 表示位置をずらす
   var headH = 100;
   
   // #で始まるアンカーをクリックした場合に処理
   $('a[href^="#"]').click(function() {
      // スクロールの速度
      var speed = "slow";// ミリ秒
      // アンカーの値取得
      var href= $(this).attr("href");
      // 移動先を取得
      var target = $(href == "#" || href == "" ? 'html' : href);
      // 移動先を数値で取得
      var position = target.offset().top - headH;
      // スムーススクロール
      $("html,body").animate({scrollTop:position}, speed, 'swing');
      return false;
   });
});

})(jQuery);

コメント