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

Pocket

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


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


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



広告:無料ブログチェックのご案内

メルマガ登録後から10日間限定で無料ブログチェックを始めてみました。チェックを受けたその日のうちに1万円以上稼げた人もいるので、お気軽に申し込んでみてください。

実験的に始めただけなので数日後には終了してるという可能性もあります。 そのときはすみませんm(_ _)m

>>> 無料ブログチェック申込みの詳細

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

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

3…2…1…スタート!





・・・





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


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


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


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


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


「”」は※ 半角に直してから使用してください。


スタートのタグ

<a href=”#smoothplay”>3…2…1…スタート!</a>


ゴールのタグ

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


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



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

2つ目のスムーズスクロール

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

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


3つ目のスムーズスクロール

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

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


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



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

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

こんな感じに
↓  ↓  ↓

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


ゴール!!


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


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



プラグインでもOK

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

Easy Smooth Scroll Links
Smooth Scroll Links


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


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







ゴール!!

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

サブコンテンツ