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

関連記事

機械学習とディープラーニングの違い|入れ子構造で理解する基礎知識

前回の記事では、人工知能の歴史を 第1次〜第3次AIブームの流れとして整理しました。 その中で何度も登場したのが、 「機械学習」と 「ディープラーニング」です。 この2つは似...続きを読む

2025.12.24生成AIパスポート

ChatGPT vs Gemini|無料版を徹底比較してWeb担当者が選ぶための判断基準

「ChatGPTとGemini、結局どちらを使えばいいのか分からない」 「無料版で試したいけれど、違いがよく見えない」 そんな疑問を感じていませんか。 AIツールの情報は増えていますが、 機能の多さや性能比較だけでは、自分に合うかどうか判断しにくい...続きを読む

2025.12.19

【フォト】冒険と遊びの喫茶店 らみぃ

藤枝駅の近くにある冒険と遊びの喫茶店「らみぃ」に行ってきました。ボードゲームが遊べるプレイスペースで、並んでいるボードゲームをみるとワクワクします。 アナログゲームをじっくりと遊ぶことができるお店、はじめていきましたが、楽しい時間を過ごせてとても充実した時間を過ごせました!...続きを読む

2018.02.22フォトギャラリー藤枝

ドリュフォロスで見る“カノンの具現化”

カノンを彫刻にした男、ポリュクレイトス 古代ギリシャの彫刻家ポリュクレイトスは、“美しさの論理”を定めた人物として知られていますが、 その思想を実際に形にしたとされる代表作が、 《ドリュフォロス(槍を持つ青年)》 です。 この作品は、彼が著したとされる比例の書『カノン...続きを読む

2025.07.20カノンデザイン論古代ギリシャ

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

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

2025.07.25シームレステクスチャ