N-takデザインブログ

WEBで培った作品や技術を公開しています。

追従するサイドバーでしかもページ内をスムーズにリンクするjQuery

作業用メモです。

 

1.jQ/Js

①ヘッド内もしくはリンクを設置

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

 

②ヘッド内もしくはリンクを設置

$(function(){

   // #で始まるアンカーをクリックした場合に処理

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

      // スクロールの速度

      var speed = 1000; // ミリ秒

      // アンカーの値取得

      var href= $(this).attr("href");

      // 移動先を取得

      var target = $(href == "#" || href == "" ? 'html' : href);

      // 移動先を数値で取得

      var position = target.offset().top;

      // スムーススクロール

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

      return false;

   });

}); 

 

これだけで、ページ内のリンク移動がスムースリンクになります。