個別記事のページです

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の常識
過度な営業は一切しておりません。

簡単無料お見積もり

問い合せ内容 見積り  相談  更新管理  PPC広告・SEO対策
  • 売上げアップ
  • 会社拡大
  • ブランド力を持ちたい
  • 新規事業参入したい
  • 単価を上げたい
  • 価格競争したくない
  • 社内環境を良くしたい
  • 経営者が楽になる
  • 社員を成長させたい
  • 良い求人が欲しい
  • 離職率を下げたい
  • 残業を減らしたい
  • 客層をよくしたい
  • 会社がうまく回るようにしたい
  • クレームを減らしたい
  • リピート、口コミを増やしたい
  • ターゲットを絞りたい
  • 会社の方針を明確にしたい
  • SEO対策
内容
お問合せ