【JavaScript】ページ内リンクでページスクロールを実現する「smoothScroll.js」

「smoothScroll.js」は、ページ内リンクでページをスクロールを実装できすJavaScriptライブラリです。jQueryを実装していない状態でも稼働するので、手軽に導入できます。

基本的な使い方

導入は簡単、ライブラリを読み込むだけで実装でき、設置後はページ内のリンクがスクロールに対応します。

<script type="text/javascript" src="./smoothScroll.js"></script>

スクロールを解除する

「smoothScroll.js」でよいところは特定のリンクはスムーズさせない指定ができることです。例えば、ページ移動せずに内容を変更するタブ形式のデザインなどを実装するとき、ページ内リンクで表示の切り替えを行うと意図せずスクロールしてしまうことがあります。そのような場合は、スクロールさせたくない機能があると、解除してスクロールするのを防ぐことができます。

スクロールを機能させない場合は、リンクに「data-tor-smoothScroll=”noSmooth”」を追記することで制御することができます。

<a href="#top" data-tor-smoothScroll="noSmooth">スムーズなし</a>

「smoothScroll.js」ダウンロード

MITライセンスで公開しており利用することができます。開発・公開をしている株式会社トゥーアール(to-R)さんには感謝です。

関連記事

【フォト】吉田町川尻海岸『幸福呼ぶ鳥居~初日の出~』

静岡県吉田町にある川尻海岸では年始の期間限定で『幸福呼ぶ鳥居』がお目見えします。鳥居に朝日が昇る様子は幻想的です。初日の出の日は、多くの方々でにぎわっていました。 フォトギャラリー ※写真をクリックすると拡大表示します。 [gallery link="file" col...続きを読む

2017.01.01フォトギャラリー

【CSS】スタイルシートが適用される優先順位について

WEBサイトのデザインでは定番になっているCSS(カスケーディング・スタイル・シート)。最近では、CSSで出来ることも多くなり、自然と記述する内容を多くなってきています。また外部のライブラリーなどを読み込むとCSSのボリュームが増えます。 そうなると、同じ名前の宣言で異...続きを読む

2015.02.06CSSHTMLコーディング

【メモ】英語での曜日の省略表記

サイトや印刷物を制作するときに、英語の表記で曜日を表記することがあります。大文字、小文字、省略など制作時にコピーできる役立つメモをまとめました。 曜日の英語表記 日本語英語省略省略省略 月曜日MondaymonMonMON 火曜日TuesdaytueTueTU...続きを読む

2019.06.22

【WP】開発者向け便利ツールプラグイン

WordPressで開発を行う場合、デバッグやテストなどをサポートしてくれる便利なプラグインをご紹介します。 Debug Bar 「Debug Bar」プラグインはインストールするとサーバの性能(PHP、SQLのバージョン、使用メモリ-)、クエリの応答速度などを確認す...続きを読む

2015.02.27WordPress

【JavaScript】国産ライブラリtmlib.jsを使ったアニメーション入門

「tmlib.js」はゲームやブラウザツールを簡単に作る事ができる国産のJavaScriptライブラリです。「tmlib.js」を使うとアニメーションや画像表示、サウンドなどゲームなどに必要な処理がプログラミングしやすいようになります。 WEBサイトなどにもアニメーショ...続きを読む

2015.03.11HTMLコーディング