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

関連記事

生成AIパスポート合格への学習ロードマップ|2026年を見据えて「判断できる軸」を身につける

生成AI(ChatGPTなど)を仕事に取り入れたい。 そう思って情報を集めてみたものの、 「どこまで使っていいのか分からない」「間違えたら怖い」「責任は誰が持つの?」 と、手が止まってしまう方は少なくありません。 ...続きを読む

2025.12.23生成AIパスポート

AIが書いたCSSは正しいのか?「動くけど、後から直せなくなる」コードの正体

AIが書いたCSSは正しいのか、それとも「後から直せなくなる設計」なのか? 今見ているそのCSS、表示は問題ない。 デザインも要件どおりで、とりあえず見た目も問題ない。 それなのに、少し修正しようとした瞬間に手が止まる。 「この指定、どこまで影...続きを読む

2026.01.05AI活用CSS生成AI

【無料】商用利用OKシームレステクスチャ「安山岩(アンデサイト)」素材

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

2025.08.01シームレステクスチャ

インデックスタブ制作のチュートリアルまとめ

WEBデザインにおいても、ファイル、手帳、ノートなどの端に付けるインデックスタブ(索引)と同じ機能をもつタブを作りコンテンツをまとめて表示することができます。 作り方はjQueryを使用したものや、CSSやJavascriptを使用するものなどさまざまです。今回はインデ...続きを読む

2015.02.07HTMLコーディング

生成AIの仕組みを解説|なぜ「考えているように見える」のか

前回の記事では、機械学習とディープラーニングの違いを整理しました。 ここまで来ると、多くの方がこんな疑問を持ちます。 「生成AIって、結局なにをしているんですか?」 「どうして考えて文章を書いて...続きを読む

2025.12.24生成AIパスポート