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

関連記事

【WP】WordPressのアーカイブリストの「年月」表示をカスタマイズする

WordPressでは投稿された記事に対して、年別や月別のアーカイブを生成できます。アーカイブのリスト表示は2014年1月というように掲載されますが、年や月の表示を変えて表示したいこともあります。 アーカイブの日付表示 投稿された記事の日付の形式はWordPr...続きを読む

2015.02.19WordPress

カノンの再発見:ルネサンスに蘇った“美しさの論理”

「古代に学べ」──ルネサンスの合言葉 14世紀から16世紀にかけてヨーロッパで巻き起こったルネサンス(Renaissance)は、 文字通り“再生”を意味する芸術運動です。 当時の芸術家たちは「人間の身体こそ、宇宙と調和した完璧な構造である」と信じ、 その美を再び論理的に...続きを読む

2025.07.20カノンデザイン論ルネサンスレオナルド・ダ・ヴィンチ

AI時代でも陳腐化しないCSS設計の本質とは

生成AIを使ったHTML/CSSコーディングが当たり前になり、 「コードを書くスピード」そのものは、以前よりも確実に上がりました。 一方で、こんな感覚はありませんか? ・その場では便利だったはずのCSSが、あとから触れなくなる ・生成A...続きを読む

2026.01.16AI活用CSS生成AI

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

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

2015.03.03HTMLコーディング

【フォト】love local MARKET 1/26 HOTマーケット

love local MARKET 月末の金曜日はちょっと豊かに。プレミアムフライデー。藤枝駅南口広場で開催されている、HOTマーケットに行ってきました。 ここ最近は藤枝でもめずらしい雪が舞うほど冷え込む日が続いているなか、屋外でのマーケット。イルミネーションに照らされて、...続きを読む

2018.01.26フォトギャラリー