2,504 views
この記事は最終更新から 2386日 が経過しています。
(1) やりたいこと
以前やった (26) ページトップに戻るボタン の逆向きをやってみる。
すなわち、ボタンを押すとページ最下部に移動させたい。
(2) 実現方法
実装したサンプルページはこちら。
https://www.dogrow.net/hp/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);
});
});