【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】グラフなどの描画をサポートするライブラリまとめ

折線グラフ、棒グラフ、円グラフやレーダーチャートなどを画像を使わずに描画をするJavaScriptライブラリをまとめてみました。 Chart 6種類のグラフを作成できるJavaScriptライブラリです。描画にはHTML5のcanvasを使用しています。 Dem...続きを読む

2015.03.02HTMLコーディング

【デザイン】リアルの花を使った美しいイラストレーションの世界

今回は素敵だなと思ったアーティストさんの作品をご紹介します。表題のとおり、リアルの花や自然のものを使い、美しくかわいらしいイラストレーションの作品を手掛ける Lim Zhi Wei さん。シンガポールを拠点に活動されているアーティストです。 Lim Zhi Wei 彼...続きを読む

2015.02.16インスピレーション

【リリース】新サービス「プロモーションビデオ制作」

サービス内容に新しく「プロモーションビデオ制作」が加わりました。インターネット環境の高速化やスマートフォンの普及により多くの方が動画コンテンツを身近に楽しむようになりました。そして、動画コンテンツは、新しいマーケティングツールとして注目されています。 店舗のオープンやイベン...続きを読む

2020.02.16

【デザイン】フード&ドリンクのメニューデザインまとめ

先日、レストランの店舗様のWEBサイトやメニュー表、名刺などのデザインワークスを手掛けさせていただくことになりました。 今日は、フードやドリンクのメニューデザインで参考になったデザインワークスのまとめです。 Discover YOUR WAY Cafe - Patra...続きを読む

2015.02.15インスピレーション

【フォト】蓮華寺池公園フォトギャラリー≪冬≫

藤枝市のほぼ中央に位置し、「花・水・鳥・笑顔」がテーマの公園「蓮華寺池公園」。池を囲む公園は、桜や藤の花、蓮の花など季節を通して自然を楽しむことができる憩いの場所です。今回、紹介する冬の蓮華寺池公園の山頂周辺の写真です。自然のなかを歩いたり、眺めの良い見晴台があったり、広場やアス...続きを読む

2018.02.07フォトギャラリー藤枝