目次をクリックすると自動で下に動くスムーズスクロールの設定方法

特に記事内容が濃く文章量が多いと、目次を作ることになり、何度もスクロールが必要なケースがありますよね。

そんな時に特定の場所に、あっという間に到達できる方法としてスムーズスクロールが挙げられます。

ブログを作成する人にとっては、おそらく一度は使う機会があるかと思うので、覚えておいたほうがいいでしょう。

スムーズスクロールの設定方法

まずはスムーズスクロールというものがどういうものなのか、説明するために以下のリンクをクリックしてみましょう。

⇒３…２…１…スタート！

・・・

いかがでしたでしょうか？

スムーズスクロールというものがどういうものなのか一発でわかってくれたと思います。

では設定方法の説明をしたいと思います。

必要なことは、どこのリンクをクリックすれば、どこまで飛ばすことができるのか、この二点ですよね。

ここでは簡単にその２つをスタートとゴールという言葉で説明してみたいと思います。

■ スタートのタグ

<a href=”#smoothplay”>３…２…１…スタート！</a>

■ ゴールのタグ

<div id=”smoothplay”>ゴール！！</div>

この二つのタグをそれぞれ加えることにしましょう。

また目次が沢山あるときはタグに数字を加えることで解決できます

■ ２つ目のスムーズスクロール

<a href=”#smoothplay2″>スタート</a>

<div id=”smoothplay2″>ゴール</div>

■ ３つ目のスムーズスクロール

<a href=”#smoothplay3″>スタート</a>

<div id=”smoothplay3″>ゴール</div>

このやり方により目次を増やすことができます.

スムーズスクロールを設定する上での注意点

実はこのブログでスムーズスクロールを設定する場合、ゴールの位置を少しだけずらしています。

こんな感じに
↓　　↓　　↓

<div id=”smoothplay”></div>

ゴール！！

なぜかというと、ブログの文字の大きさや行間によって、少しゴールの位置がずれてしまうからです。

スムーズスクロールを使いたいサイトによって、この微妙なズレはおそらく様々なので、実際に使ってみて調整することをおすすめします。

プラグインでもOK

スムーズスクロールは専用のプラグインを使うことで簡単に設定をすることもできます

Easy Smooth Scroll Links
Smooth Scroll Links

手軽にこの機能を使いたいという方は、導入してみるのもいいのかもしれませんね。

個人的には、あまりプラグインストールさせたくないという理由から、毎回手動でスムーズスクロールの機能を使うようにしています。

ゴール！！

では、こちらをクリックして、上に戻ってください。

『無料PDF配布』＆『無料メール講座』

5年以上ブログで稼ぎ続けている経験を元に、「月収1万円を稼ぐことに特化したブログノウハウ」を作ってみました。お気軽にダウンロードしてみてください。
ダウンロードしてみる
月収10万円以上稼ぎたい人への「メール講座」もやってます。