【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)さんには感謝です。

関連記事

【無料】商用利用OKシームレステクスチャ「花崗岩(グラナイト)」素材

自然の岩肌を表現したシームレスの無料で使えるテクスチャです。花崗岩(グラナイト)の質感を再現しています。継ぎ目のないシームレス加工をしているテクスチャです。テクスチャマッピングやタイル敷の背景素材などにお使いいただけます。商用利用OKのフリー素材となっております。 ...続きを読む

2025.07.24シームレステクスチャ

【WP】5段階評価ができる「Yet Another Stars Rating」の導入方法

商品などのレビューに評価として星がついているのを見かけることがあると思います。外部からの評価として商品購入の参考にもなります。 今回はWordPress上の記事に5つ星の評価をつけることができるプラグイン「Yet Another Stars Rating」の導入方法をご...続きを読む

2015.04.15WordPress

生成AIパスポートの基礎概念を学ぶための記事を公開しました

基礎概念・試験概要の理解|生成AIパスポート学習の「最初の土台」 生成AIパスポートの学習を始めるとき、 多くの方が最初に感じるのが 「何から理解すればいいのか分からない」という戸惑いです。 ChatGPTや...続きを読む

2026.01.05

フリーランスWebクリエイターが直面する3つの壁とは?

フリーランスの現実:多くが最初にぶつかる“見えない壁” 「フリーランス」という働き方は近年、爆発的に注目を集めています。 SNSでは「月収100万円を達成した」というインフルエンサーの発信が、YouTubeには「会社を辞めて自由を手に入れた」という動画が溢れています。 ...続きを読む

2025.09.24フリーランス独立経営起業

【HTML】Internet Explorer 対応したBootstrapの選び方

Webサイトの制作を相談をいただく際に、「Internet Explorer に対応したい」という要望をうかがうことがあります。主要ブラウザの日本国内のシェアを調べてみると、最新バージョンの「Internet Explorer 11」で約7%、「Internet Explorer...続きを読む

2021.02.05BootstrapHTMLコーディング