2020/03/31

縦長のページには必須！「ページ上部に戻る」ボタンの実装方法

縦に長いホームページを見ているときに、
ページの一番上まで戻るのにストレスを感じたことはありませんか？

あなたのページも、実はそう思われているかもしれません。

それを解決するのが、「ページトップへ戻る」のボタン！

ボタンの設置自体はHTMLで簡単にできる
「スムーススクロール」でヌルっと移動させて、オシャレに分かりやすく！
コードはシンプル
色々応用して、見やすい使いやすいホームページに！

ボタンの設置自体はHTMLで簡単にできる

ボタンを設置して、ページトップに移動させるだけであれば
HTMLのアンカーリンクを使ってあげれば簡単に実装できます。

アンカーリンクのデモページ

ただ一瞬でページトップへ切り替わるため、
自分がどこにいったのか迷子になってしまうことも。。。

「スムーススクロール」でヌルっと移動させて、オシャレに分かりやすく！

jQueryを使えば簡単に、
ヌルっとオシャレに移動させることができます。
自分の居場所からページトップまで、どう移動したか分かりやすいです。

【今回の完成形】
スムーススクロールのデモページ

コードはシンプル

①移動させたいところ（ページトップ）にidをつける

まずは移動させたい場所にidという名前のようなものを付けてあげます。
後で「ここに移動させますよ」というのを設定するためです。

今回はページトップなので、bodyタグに「top」と名前を付けます。

<body id="top">

②ボタンをaタグで囲み、①のidのところに飛ぶように指定

ボタンを画像か何かで作り、それをaタグで囲ってあげます。
リンク先に①のidを指定してあげることで、その場所に移動するように設定できます。

idにリンクさせるときは、「#」を頭につけてあげます。

<a href="#top">ボタンの画像</a>

③jQueryを読み込む一行を<head></head>内に追加

jQueryとは、Javascriptを短いコードで書けるようにする便利なおまじないです。
<head>タグ内に何も考えず追加。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

④ヌルっと動く設定をする

簡単に説明すると、
「#id のaタグをクリックすると、〇〇秒かけて、その場所まで移動する」
という設定をします。

<script>
jQuery(document).ready(function($){
  $('a[href^="#"]').click(function(){
    var speed = 1000;
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top;
    $("html, body").animate({scrollTop:position}, speed, "swing");
    return false;
  });
});
</script>

スピードを変えるには、こちらの数値をいじるだけ。