PAGE TOP

少ないコードでページ内を自在にスクロールさせるjQuery

ページ内スクロールデモ・太陽系

最近主流になっている縦に長いサイトなどでは同一ページ内にリンクを貼ることも多いのですが、クリックした時に一瞬で遷移するのではなく、スムーズなスクロールによってわかりやすく移動をさせるのが当たり前になっていて、そのやり方も様々あるのですが、jQueryを使って上へも下へも「#」の付いた場所へスムーズにスクロールさせて、且つコードが繁雑にならないようなものをご紹介します。

 

Smooth Scroll Demo – Solar System

太陽系の大きさを体感できるページ内スクロールのデモを作りました。ささっと作りましたので大した機能を持たせてはいませんが、月の大きさ(直径3474km)を1pxとした場合に、太陽からの距離感を感じれるようなページになっています。

右側に固定した太陽系の各惑星の名前をクリックして、ページ内を自動スクロールさせます。
一応準惑星の冥王星さんも仲間に入れてあげました。宇宙のスカスカ具合を是非体感してみてください。
総高さ1,716,755pxのバカみたいに縦に長いページです。

実装方法

以下のコードをインラインで記述。

$(function(){
	$('a[href^=#]').click(function(){
		var speed = 500;
		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;
	});
});

短くていいですね。移動する際のスクロール速度は、3行目で決定。
あとは、移動させたいポイントにラベルしておきます。

<a id="○○"></a> <!--任意のID名-->

※わざわざaタグで書かなくても、IDタグがあるところで指定できます。

 

リンクは下記のように書いてやればOK!

<a href="#○○">移動</a>

同じカテゴリのおすすめ記事

  • カテゴリー

  • 最近の投稿

  •