jQueryでページ内リンクをスクロール付きで実装

2018年01月15日 · jQuery

ページ内リンクはみなさんはどのようにして作られておりますか？
１つ１つ制御する方法もありですし、プラグインを利用してリンクを制御させる方法もあると思います。
今回はプラグインを利用しないで、簡単にページ内リンクをスクロール付きで実装する方法についてご説明します

ページ内リンクで色々と書かれております。
代表的な例からその動作を説明しながら作成をしていきます。

表示用の画面作成

まずはhtmlで表示用の画面を作成します
今回は「nav」内にリンクとページ遷移先の枠を用意しておく作りとなっております
リンクはそれぞれ、「#test」の後に番号を入れ、ページ遷移先のdivにid「test番号」と設定をしました。

<nav>
  <ul id="nav" class="clearfix">
    <li><a href="#test1">テスト1</a></li>
    <li><a href="#test2">テスト2</a></li>
    <li><a href="#test3">テスト3</a></li>
    <li><a href="#test4">テスト4</a></li>
  </ul>
</nav>
<div id="test1" class="area"><p>test1</p><a href="#nav">上に戻る</a></div>
<div id="test2" class="area"><p>test2</p><a href="#nav">上に戻る</a></div>
<div id="test3" class="area"><p>test3</p><a href="#nav">上に戻る</a></div>
<div id="test4" class="area"><p>test4</p><a href="#nav">上に戻る</a></div>

表示用のCSSです
「nav」をメニューぽく見せる用意と、スクロールさせる為に「div」に高さを入れました

#nav {
  margin-bottom:10px;
}
#nav li{
  float:left;
  margin-right:10px;
}
.area {
  border-top:1px solid #333;
  width:100%;
  height:500px;
}
.clearfix::after{
  content: "";
  display: block;
  clear: both;
}

動作部分のjQueryを作成

動作部分のjQueryになります。

$(function(){
  $('a[href^="#"]').click(function() {
    var href = $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top;
    $('body,html').animate({scrollTop:position}, position, 'swing');
    return false;
  });
});

一つずつ解説していきます
「$(‘a[href^=”#”]’).click(function() {」では
hrefに#のあるaタグをクリックしたら中の内容を起動させます
通常リンクでは動作しない設定となっております

「var href = $(this).attr(“href”);」では
クリックしたaタグ（this）のhrefの内容を変数「href」に格納

「var target = $(href == “#” || href == “” ? ‘html’ : href);」では
先ほど取得したhrefの内容がページ遷移先の要素にあるかどうかを確認し、
あれば遷移先の要素を取得し「target」にデータを格納

「var position = target.offset().top;」では
「offset().top」では遷移先がブラウザトップからの表示位置を取得し「position」に格納

「$(‘body,html’).animate({scrollTop:position}, position, ‘swing’);」では
スクロールする指示になっております。
「{scrollTop:position}」で、どこまでスクロールするかを指定しております
「, position」ではスクロールの時間を指定
今回はどの距離でも一定の時間で動作させる為、距離と時間を同じ変数を利用しております。
他のサイトではspeed変数を作り「５００」等の数字指定がされておりました。
「’swing’」はjQueryのanimateで持つ動作パターンの１つです
デフォルトでは３種類が用意されております「easing」、「linear」、「swing」となります。

「return false;」では
aタグの機能をOFFにしたい為に最後に「return false」を指定しておきます。
こちらの機能がないとURLにクリックしたhrefの内容が後ろに追加されたりします。
動作に予期せぬ不具合がでる場合もあるので「return false;」を入れておくことが無難でしょう

実際の動作を見てみる

実際の動作を見てみましょう

See the Pen Scroll page link by web-wizardry (@web-wizardry) on CodePen.

調べてみると色々なやり方が存在しますので、皆さんも調べてみて自身にあうやり方を見つけてください

web-wizardry

インターネット・スマホ、そしてテレビにwebの魔法をWizardry