記事内指定箇所までページを移動させるスムーズスクロール機能HTMLタグ使い方解説

HTML記述は様々な機能を作成することができ、
WEBブラウザ内の移動さえも指定することができます。

WEBサイト記事を作成していて、
ある場所から引用などで同じページ下部分などに飛ばしたい時に便利なHTMLタグ
「スムーズスクロール」機能の使い方と記述方法を解説します。

スムーズスクロール機能は、例えば同一ページ上での別箇所にリンクを指定し、
クリックしたユーザーが「ゆっくりとその箇所に移動」する動きとなります。

スムーズスクロールとは？

スムーズスクロール機能とは、実際に触ってもらうのが早いので、
以下の項目をクリックしてみてください。

以下の部分をクリックで、ページ下の指定部分に移動します。
これがスムーズスクロールだ！！！

そして、
記事下部分の「上部分に戻る」をクリックしてもらえると、
以下の箇所に戻ってきます。

ここに戻ってきます。

例えば、記事のボリュームが長い時に注釈部分などを記事下部に書いておいて置く時や
記事内での参考場所などを明確に指定したい時などに利用すると便利なHTMLタグです。

スムーズスクロールのHTML記述方法

スムーズスクロールの記述方法の一例を解説していきます。

色々なHTMLでの記述方法がありますが、
こちらでは簡単で使いやすい記述を一例として解説していきます。

指定記事場所に飛ばす記述

これがスムーズスクロールだ！！！
上記の記述方法は、以下になります。

<a href="#smoothplay">これがスムーズスクロールだ！！！</a>

飛ばされる側の指定記事場所の記述

上記の記述方法は、以下になります。

<div id="smoothplay">スムーズスクロールを目撃したか！！</div>

同一記事内に複数のスムーズスクロールを記述する場合

複数のスムーズスクロールを記述する場合は、以下の記述となります。

複数の指定記事場所に飛ばす記述

• 俺は男だ！
• だって男だ！！
• 雨の新開地

上記の具体的記述

• <a href="#smoothplay3">俺は男だ！</a>
• <a href="#smoothplay4">だって男だ！！</a>
• <a href="#smoothplay5">雨の新開地</a>

※当記事内でタグを連発しているので3からですが、1からの指定で大丈夫です。

複数箇所に飛ばされる側の指定記事場所の記述

• 男なら、やれんのか！

（「俺は男だ！」をうけて）

• トラさんみたいになれんのか！！

（「だって男だ！」をうけて）

• まぁ一杯やろうぜ！！！

（「雨の新開地」をうけて）

上記の具体的記述

• <div id="smoothplay3">男なら、やれんのか！</div>
• <div id="smoothplay4">トラさんみたいになれんのか！！</div>
• <div id="smoothplay5">まぁ一杯やろうぜ！！！</div>

ページの最下部からトップページ上まで戻る記述

ついでに、ページ最下部から一番上まで戻る記述を以下に。

Topへ戻る

<a href=”#header”>Topへ戻る</a>

スムーズスクロール体験スペース

記事上部分の「これがスムーズクロールだ！！！」をクリックしてもらえると、
この部分にスクロールしてきたと思います。

また上部分に戻って記事の続きを読んでください。
記事の続きに戻るには以下を
「上部分に戻る」

スムーズスクロールはWordpressプラグインEasy Smooth Scroll Linksでも

上記のスムーズスクロール記述ですが、
Wordpressプラグイン「Easy Smooth Scroll Links」でも設定できます。
もしくは、「Smooth Scroll Links」でも設定できます。

なお、上記プラグインを有効化するとサイト内他記事へのリンクも簡単に設定できます。

サイト記事構成はユーザビリティを重視していく

記事内の移動でつかえるスムーズスクロールHTML記述はかなり便利ですが、
閲覧ユーザーのユーザビリティを第一に考えて利用していきます。

この記事のようにあまりに乱用すると閲覧しにくいので、
長文記事の場合などにスムーズスクロールタグを利用すると効果的かと思います。