第二十五回「ページ内リンクをスクロールで移動」

ページ内リンクを指定する時に、急に画面が切り替わると現在の場所を見失うことがあります。
それを、解消するためにスクロールで指定の位置まで移動する設定にjQueryを使って行います。

■ページ内リンクをスクロールで移動するやり方

1.ボタンを作成します。

<a href="#bottom">ボタン</a>

view raw gistfile1.txt hosted with by GitHub

2.head内でjQueryを呼び出します。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

view raw gistfile1.txt hosted with by GitHub

3.その後に以下のスクリプトを記入します。

	<script type="text/javascript">
	$(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;
	});
	});
	</script>

view raw gistfile1.txt hosted with by GitHub

★完成★

webサイトを作る際は、そのサイトを見るユーザーがいかに見やすいかを意識して作るように心がけましょう。

＜参考サイト＞

【jQuery】ページ内リンクをするするーっとスムースにスクロールするJavascript ｜ KLUTCHE