個別記事のページです

2016年2月16日(火)
このエントリーをはてなブックマークに追加

jQueryでページ内リンクのスクロールを一括設定する

ページ内リンクでスムーズにスクロール移動させる方法をご紹介します。
jQueryと聞くと難しく思いますが、とても簡単に実装できます。

pc_js.jpg

1.jQueryの記述
まず、<head>~</head>の間に以下のソースを記述します。

$(function () {
 // #で始まるリンクを対象
 $('a[href^=#]').click(function(){
 // 除外対象を指定する場合
 // $('a[href^=#]:not(a[href=#foo], a[href=#bar])').click(function(){ 
   $('html,body').animate({
     scrollTop: $($(this).attr('href')).offset().top },
     'slow','swing');
   return false;
 })
});

2.HTMLの記述
HTMLの記述は、通常のページ内リンクの記述と同じです。
#で始まるリンクを対象、とあるようにリンク元のaタグが
<a href="#sample">サンプル</a>のように「#」が付いているリンクは
全て一括でスクロール移動されます。

<例>
リンク元:<a href="#sample">サンプル</a>
リンク先:<div id="sample">サンプルの内容</div>

こちらのページで実装しておりますので、ぜひ一度ご覧ください。

以上です。
ページ内リンクをスクロール移動させたい方はこの方法を試してみてください!

書籍の内容と遜色のないPDFを無料プレゼントしております。
売れてる人しか知らない!売れるホームページの10の常識
過度な営業は一切しておりません。
お問合せ