作業効率化

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

056d507bcba47c002f192202875c952e

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

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

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

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

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

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

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

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

ゴール!!

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

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

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

POSTED COMMENT

  1. 目次をクリックすると自動で下に動くスムーズスクロールの設定方法 | ネットを使い在宅で仕事・副業をしてお金を安定して稼ぐ30代ジョイのブログ | ミリオンハイスクール | ネットビジ より:

    […] ールが挙げられます。 [紹介元] 目次をクリックすると自動で下に動くスムーズスクロールの設定方法 | ネットを使い在宅で仕事・副業をしてお金を安定して稼ぐ30代ジョイのブログ […]

  2. kousuke より:

    こんばんは、初めてコメントさせて頂きます。

    記事の中に、「あまりプラグインインストールさせたくない」という記述を拝見したのですが
    どういう理由からなのでしょうか?

    よろしければお聞かせいただけるでしょうか
    よろしくお願いします。

    • ジョイ より:

      ジョイです。

      これは単純にブログが重くなるからです。

      読み込み速度、画像の表示速度などに
      多少ですが影響ができるので。

      また、プラグイン同士で相性が悪いこともあります。

      Aというプラグインを使う分には問題ない。
      Bというプラグインを使い分には問題ない。

      でもAとBを一緒に使うと不具合が出るという感じです。

  3. けんた より:

    これは賢威はデフォルトの状態でできるようですが、他のワードプレステーマでやる場合は、どこを設定すれば良いのでしょうか?

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です