webfeelfree

jQueryのスムーススクロールの実装とスルスルーっとページ内リンクさせる2つの理由

いろんなサイトでよく見る、ページ内をスルスルーっと移動するあれっ、スムーススクロールと言います。
スムーススクロールは、Webサイトをリッチにかっこよく演出するには、欠かせないものですよね~。

今回は、そのスムーススクロールをjQueryで実装する方法や目的をメモっていきます。

デモは、記事の最後にあります。

スムーススクロールはWebサイト迷子の防止品!

リッチにかっこよくと書きましたが、もちろんその要素も重要です。
でも、私はスムーススクロールを設置する理由には、もう一つ、Webサイト内で迷子にならないようにするためのものとも思っています。

こんなことはないですか?
パッと切り替わる大規模なサイトで、とある語句をクリックしたときに移動したのはいいですが、いざ戻ろうと思って上にスクロールしたら、別のページだった!さっきの内容がない!!なんてことが・・・。

私はあります。

もう、それは軽くWebサイト内で迷子になっているという事ですよね。
ブラウザの戻るボタンを押せばいいのですが、ユーザーによっては、ページを閉じてしまうかもしれません、そして、それっきり来ないかもしれませんよね。

そういう迷子になることを防止するためにも、スムーススクロールが存在するのだと思っています。

コーディング

前置きが長くなってしまいましたが、実際のコードをメモっていきたいと思います。

HTML

<a href="#bottom" id="top">下にスクロール</a>
<p>↓</p>
<a href="#top" id="bottom">上にスクロール</a>

最後にある、デモの簡易版になります。
<a hrer="xxx">で、ジャンプ・移動先を指定します。
id="xxx"で、ジャンプ・着地地点を設定します。

id属性を使うので、いろんなタグに設定することができて、ジャンプすることができます。
注意することは、そのページ固有のid名をつけるという事でしょうか。
id属性を使っている時点で、そのページ固有の名前になっていると思いますが、id名が重複しないよう命名してあげましょう。

jQuery

メインのjQueryはこちら。

$(function(){
	$("a[href^=#]").click(function(){
	$("html,body").animate({ scrollTop: $($(this).attr("href")).offset().top }, 3000 ,"swing");
	return false;
	})
});

ポイントは、3行目の後半にある「3000」という値です。
単位はミリ秒になります。
3000という事は、「3秒かけて移動してください」という意味です。
値が少なければ早く移動しますし、多ければゆっくりと移動ということになります。

また、"slow""normal""fast"でも指定できます。
この時、混同してしまって”3000″みたいに、数値を""で囲むと、ちゃんと動かないので注意が必要です。

無知だった私は、ハマってしまった。

デモ

See the Pen スムーススクロール by webfeelfree (@webfeelfree) on CodePen.4259

あとがき

jQueryでのスムーススクロールは、今のところ重宝する存在ですかね。
スムーススクロールを設置することによって、Webサイトの表現やデザインのバリエーションも広がるので覚えていて損はありません。
リッチでかっこよく、かつ、迷子防止も含めて、お役に立てればと思います。

ちなみにjQuery本体の設置は、こちら。

参考
【jQuery】ページ内リンクをするするーっとスムースにスクロールするJavascript | KLUTCHE
少しのコードで実装可能な20のjQuery小技集 | Webクリエイターボックス

最新記事

読まれている記事

ツイッター

カテゴリー