スマホ用サイトやランディングページでよく使うページ内リンクを流れるように移動させる方法

今では当たり前に実装されているページ内リンクをスムーズに流れるように移動させる方法をメモしておきます。

スマホ用サイトでは最下部に【TOPへ戻る】のようなボタンがあったり、ランディングページでは上部のメニューやページ途中のバナーをクリックするとページ内のコンテンツへギュイーーーンと移動してくれるアレです。

JavaScriptを数行書くだけでページ内リンクがギュイーーーンとなります

ページ内リンクを飛ばすには飛ばしたい先のコンテンツのタグにidを指定する必要があります。

リンク先のhrefには#ID名を指定します。

HTML

<a href="#here">ここをクリックすると飛んでいく</a>









<div id="here">ここへ飛んでくる</div>

間に入るであろうコンテンツは省いていますがこうゆう感じです。

このままではリンクをクリックするとパッと画面がリンク先へ変わってしまいます。

ギュイーーーンとするにはJavaScriptを記述する必要があります。

JavaScript

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

これをそのままJSに書けばOKです。

【var speed = 700;】の数字を変えると移動するスピードが変わります。

数字が小さいほど早く移動しますのでお好みの数字に変更して使ってみてください。

私もよく使うのでメモしておきます。