• RSS

[JS]ハッシュタグ(#)によるページ内リンクを滑らかに移動させる「smoothScroll.js」

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

「ページの先頭へ」などのハッシュタグ付き(#)のリンクを滑らかに動かすことができるjavascript 「smoothScroll.js」。

javascriptファイル を<head> 内に設置すれば動きますし、滑らかに動かしたくないリンクの除外設定もできますので重宝します。

smoothScroll.js のダウンロード

以下のサイトより、smoothScroll.js のファイルをダウンロードします。


smoothScroll.js の設置

<head> 内に javascript ファイルを設置するだけで、<a href="#hoge"> のハッシュ付きのリンクを滑らかに動かします。
<head>
<script type="text/javascript" src="./smoothScroll.js"></script>
</head>

…

<a href="#footer">footerへ進む</a>


除外設定

ハッシュタグ付きのリンクの中で滑らに動かしたくないという場合は、HTML5 のカスタムデータ属性 data-tor-smoothScroll を利用することで、特定のリンクを除外できます。
<a href="#header" data-tor-smoothScroll="noSmooth">スムーズしない</a>



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください