JQueryでスムーズスクロール

2016.06.15

今回はJQueryでスムーズスクロールする表現についてです。

通常、ページ内リンクをする場合

 <div id="link"></div>

1	<div id="link"></div>

というIDに

<a href="#link"></a>

1	<a href="#link"></a>

というリンクを指定してページ内の移動を指定するのですが。

この状態のままだとクリックした時の動きが急なので見づらく、ページを見ている側に対して優しくありません。
それに対してjQueryを使うことによって下に流れるようなスムーズなスクロール表現ができます。

まずhead内にJQueryを読み込みます。

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

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

その直下にスクリプトを書きます。

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

//スムーズスクロール

jQuery(function(){

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

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

// スクロールの速度

var speed = 500; // ミリ秒

// アンカーの値取得

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

// 移動先を取得

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

// 移動先を数値で取得

var position = target.offset().top;

// スムーススクロール

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

return false;

});

</script>

これで完成です。

設定としては下記の箇所

// スクロールの速度
	  var speed = 500; // ミリ秒

1 2	// スクロールの速度 var speed = 500; // ミリ秒

関数「speed」内の数字を変えることによってスクロール速度を変える事ができます。

この記事を見た人は次の記事も見ています。

第三十八回「noindexタグでindexさせない」

text-shadowを使った文字の縁取り

JQueryでスムーズスクロール

この記事を見た人は次の記事も見ています。

コメント

最近の投稿

アーカイブ

RELATED

アイキャッチをドロップで設定できるWordPressプラグイン

IE8で:beforeなど疑似要素が適用されない場合

HTML Imagemap Generator

Word Pressでページ送りの際にうまくいかない場合

HTML-特殊文字

illustratorグループ化