(42) ページボトムに移動ボタン

(1) やりたいこと

以前やった (26) ページトップに戻るボタン の逆向きをやってみる。
すなわち、ボタンを押すとページ最下部に移動させたい。

(2) 実現方法

実装したサンプルページはこちら。
https://hp.dogrow.net/sample/00042/

1) index.html

移動目標となる要素(今回はHR#hr_bottom)を置いている。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./style.css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="./script.js"></script>
</head>
<body>
<h1>ページ先頭です。</h1>
<div style="height:2000px;padding:10px;border:2px #000 solid;background-color:#eee;text-align:center;">
長いコンテンツ
</div>
<div class="pagebottom_button">↓底へ↓</div>
<hr id="hr_bottom">
</body>
</html>

2) style.css

@charset "UTF-8";

div.pagebottom_button{
  z-index: 9999;
  position: fixed;
  top: 20px;
  right:  20px;
}

/* 以下、別になくてもよい装飾 */
div.pagebottom_button{
  padding: 5px;
  background-color: #fff;
  border: 1px #f00 solid;
  border-radius: 5px;
  cursor:pointer;
}

3) script.js

・6行目: 移動目標の要素のY座標を取得する。
・7行目: 目標位置に向かってアニメーションスクロールする。

var pagebottom_button;
$(function(){
	pagebottom_button = $('.pagebottom_button');
	/////////////////////////////////////////////////////////////////////
	pagebottom_button.click(function(){
		var move_to_y = $('#hr_bottom').offset().top;
		$('html,body').animate({scrollTop: move_to_y }, 1000);
	});
});

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です