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

関連記事

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

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

2015.02.15インスピレーション

藤枝おんぱく2019「No33.蓮華寺池公園を着物でおさんぽしながら カメラマンに学ぶ着物姿の撮り方」

藤枝おんぱく2019「No33.蓮華寺池公園を着物でおさんぽしながら カメラマンに学ぶ着物姿の撮り方」のプログラムの案内人をしました。 お気に入りの着物を着て、春の蓮華寺池公園界隈を散策しながら、人物撮影のテクニックを学ぶことができる写真の講座と街歩きを合わせたプログラムを...続きを読む

2019.05.05フォトギャラリー藤枝

Google Chart API でQRコードを自動生成する方法

Google Chart APIはGoogleが提供しているグラフなどのイメージを作成してくれるAPIサービスです。URLに必要な値を与えるだけで、グラフなどのイメージを返してくれます。 主にグラフなどを作成することができるのですが、その機能のなかにQRコードを作成して...続きを読む

2015.03.09HTMLコーディング

【WP】カテゴリーやタグにサムネイルを反映するプラグイン「Taxonomy Thumbnail」

WordPressでサイトを構築して、記事を投稿するとき「カテゴリー」や「タグ」をつけることができます。一般的に「カテゴリー」や「タグ」にはテキストを設定して、表示もテキストを中心にしたものが多く、装飾などはCSSや画像を組み合わせて表現していることが多いと思います。 今回...続きを読む

2016.07.02WordPress

【フォト】藤枝花火大会《蓮華寺池公園》

毎年8月7日に藤枝市の蓮華寺池公園で開催される花火大会。 藤枝花火大会は、大正時代から続く静岡県藤枝市の歴史ある花火大会です。蓮華寺池公園の山々をバックに約5000発が打上がります。蓮華寺池公園周辺で花火を見ることが多いのですが、写真を撮ったのは、山側から花火を見下ろすように撮影...続きを読む

2016.08.07フォトギャラリー藤枝