ウェベン!

中小企業のホームページで使える!ページトップに戻るボタン

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

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

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

ボタンの設置自体は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>

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

var speed = 500;

1秒=1000(ミリ秒)です。
500にすれば0.5秒で移動します。

色々応用して、見やすい使いやすいホームページに!

これを応用すれば、
ページ内で目次を作って、それぞれの項目の場所に飛ばすこともできます!

目次のデモページ

見やすいサイト作りがアクセスアップにつながります!
いろいろ試してみてください。

キーワード: