HAICARA

ページ内リンク移動をなめらかにする、スムーススクロールの実装

ページ内リンク移動をなめらかにする、スムーススクロールの実装

通常何もしない状態でページ内リンクを貼ると、空間ワープするかの如く一瞬でリンク先にたどり着きます。

今回はそれをスルーッとなめらかに遷移させるワザ。

jQueryでのスムーススクロール実装

jQuery呼び出し後、</body>手前の<script>~</script>に入れるだけ。

$(function(){
  $('a[href^="#"]').click(function(){
    var speed = 500; //移動スピードの設定
    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;
  });
});

jQueryを使っているなら数行の記述でぬるぬると動くようになってステキ。

参考:jQueryでスムーススクロールを実装する方法【初心者向け】

jQueryなしの場合

参考:【脱jQuery!】ページ内リンクのスムーススクロールをjQueryなしで実装するコード

上記のサイトにて解説も交えて公開されていますので、jQueryを使わずにスムーススクロールを実装したい!という方は参考になさってください。

おわりに

“なめらかに動く”というちょっとした事ですが、ウェブサイトにおける世界観の演出にも一役買ってくれる挙動です。

URLに「#about」や「#content」が残らないのも何気に嬉しい。

ぜひご活用くださいな!

RANKING
プラグインなしでWordPressに人気記事ランキングを実装
KUSANAGIで『All-in-One WP Migration』を使ってエクスポートできない時の対処法
ウィンドウサイズに合わせて要素の高さを変動させる
サーバー維持費もゼロでコスト削減!無料でホームページを作れるサービス
Amazon風のグラフ付きレビュー機能が実装できるプラグイン『Comment Star Rating』
TO TOP