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

関連記事

【JavaScript】マウスオーバーでTooltips(吹き出し)を表示するライブラリまとめ

グラフィカルユーザインタフェース(GUI)において普及した表現手法のひとつにTooltips(ツールチップ)と呼ばれるものがあります。カーソルを合わせたときに吹き出しなどの小さな枠が表示され、補足の説明が表示される表現方法です。 今回は、Tooltips(吹き出し)を実...続きを読む

2015.03.03HTMLコーディング

スマートフォンで動画を作成する動画編集アプリ

最近はスマートフォンで写真や動画を撮影してSNSや動画投稿サイトなどへ手軽に公開できるようになりました。 そこで今回はスマートフォンで動画を編集することができるアプリをまとめてみました。 Video Collage フレームに写真や動画を当てはめてコラージュのよ...続きを読む

2015.03.05動画制作

「ウイルスに感染しました」と突然音が出たとき、本当にやってはいけないこと

スマホやパソコンを使っていて、 突然、 「ウイルスに感染しました」 「ピーッ!ピーッ!」という大きな音 が鳴り出すと、 誰でも驚きます。 画面には赤い文字や警告が表示され、 「今すぐ対応してください」 「この...続きを読む

2026.01.22インターネットの安全対策セキュリティの考え方フィッシング詐欺対策

無料AIツールのセキュリティ対策|絶対知っておきたい5つの安全ルール

「AIを使いたいけれど、セキュリティが不安…」 そんな声を、中小企業・個人事業主の方からよく聞きます。 無料AIツールは便利ですが、情報管理の意識を少し変えないと、思わぬトラブルにつながることもあります。 本記事では、専門知識がなくて...続きを読む

2025.11.28

Google ChromeでSSL化(暗号化)されていないページを閲覧すると警告表示がされます

2018年7月から最新のGoogle Chrome ブラウザを使用して、WEBサイト(ホームページ)を閲覧すると、SSL化されていないページでは、「保護されていません/保護されていない通信」という警告文が表示されるようになりました。Google が「保護されたウェブの普及を目指し...続きを読む

2018.08.18SSLWEB