Tips

【ページ内リンク】ふわっとスクロールさせる方法【コード見本あり】

  /
リンクを押したら、ふわっと目的の場所までスクロールしたい！

jQueryを使用して、「ふわっ」とスムーズにスクロールさせる方法を載せています。

こんな動きを作ってみよう

DEMOです。

下の「クリックしてね」をクリックして動きをみてください！

コード例

CSSは色や高さを指定するために書いたので、この通りに書かなくて大丈夫です。

HTMLに記述するもの

<div class="click-link">
　　<a href="#link1" class="click-btn">クリックしてね</a>
</div>
<div class="jump-link" id="link1">
　　<p>ここに飛ぶよ</p>
</div>
  • 飛ばしたい場所に「id名」
  • ボタンに「href」と「class名」

飛ばしたい場所に「id名」

上のコードの、４行目のところです。

<div class=”jump-link” id=”link1″>
　<p>ここに飛ぶよ</p>
</div>

このように飛ばしたいところ（リンク先）のHTMLにid名をつけてあげてください。

ボタンに「href」と「class名」

上記のコードの２行目のところです。

<a href=”#link1″ class=”click-btn”>クリックしてね</a>

先ほど記述したid名をhrefに書きます。

この時「#」をつけることを忘れないでくださいね！

あと、この「class名」（click-btn）が大事なところです。

今からこのclass名を使っていきます。

jsファイル（jQuery）に記述するもの

$('a.click-btn').click(function() {
  // スクロールの速度
  var speed = 400; // ミリ秒で記述
  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;
});

さっきHTMLのボタンに書いた「class名」（click-btn）を１行目に書きましょう。

$(‘a.click-btn‘).click(function() {

まとめ

まずリンク先にちゃんと飛ぶように。ボタンのhrefとリンク先のid名を記述する。

その後、ボタンに付けたclass名をjQueryに記述（１箇所）。

あとは

$('a.click-btn').click(function() {
  // スクロールの速度
  var speed = 400; // ミリ秒で記述
  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;
});

これをコピペしてしまえばスクロールしてくれます(^^)

jQuery
関連記事