指定位置にするするとスクロールするプログラムを作ります。
必要な値は?
- ページ内スクロールをした際のゴール地点「y座標」の値
画面に必要なパーツは?
- 高さのあるコンテンツ
- ページトップへ移動する為のリンク(スタート地点)
- 移動後の位置(ゴール地点)
高さのあるコンテンツ
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div { border: solid 1px #000; margin: 10px; } #main { height: 2000px; } </style> </head> <body> <div id="container"> <div id="header"> <h1>スムーススクロール</h1> </div> <div id="main"> <ul> <li><a href="https://www.google.com/">Google</a></li> <li><a href="http://www.yahoo.co.jp/">Yahoo</a></li> <li><a href="http://www.msn.com/ja-jp">MSN</a></li> </ul> </div> <div id="footer"> </div> </div><!--#container--> </body> </html>
ページトップへ移動する為のリンク(スタート地点)
<div id="footer"> <p><a href="#container">コンテナのページトップへ戻る</a></p> <p><a href="#main">メインのトップへ戻る</a></p> </div>
ページスクロールのロジックを考える
- (jQueryのライブラリを読み込む)
- ページ内リンクがクリックされる(イベント取得)※通常リンクは対象から外す
- ゴール地点のスクロールトップ「0」へ1000ミリ秒(1秒)かけて移動
- リンクの機能を無効化する
ロジック
CDNを使ってjQueryライブラリを読み込む。
<!--[if lt IE 9]> <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <![endif]--> <!--[if gte IE 9]><!--> <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <!--<![endif]-->
ロジックを記述する。
<script type="text/javascript"> $("a[href^=#]").click(function() { var goal= $(this).attr("href"); var goalTop = $(goal).offset().top; $("html,body").animate({scrollTop : goalTop}, 1000); return false; }); </script>
解説
$("a[href^=#]").click(function() { : });
ページ内リンクがクリックされる(イベント取得)
「$(“a[href^=#]”)」a要素のhref属性([]:属性を意味)の値が「#」始まり(^=:始まりを意味)の要素
「.click(function() {・・・})」クリックされた時に無名関数を実行
var goal= $(this).attr("href");
a要素のhref属性の値を取得
「$(this)」イベントの起きた要素:a要素
「.attr(“href”)」href属性の値を取得
「var goal」にhref属性値を代入:ゴール地点のid属性値
var goalTop = $(goal).offset().top;
ゴール地点の要素トップのy座標値を取得
「$(goal)」ゴール地点の要素:取得したid属性名の要素
「.offset()」対象要素の表示位置をもつオブジェクトを返す ※left:x座標位置の値 top:y座標位置の値
「.top」y座標の値を取得
「var goalTop」にゴール地点のy座標の値を代入
$("html,body").animate({scrollTop : goalTop}, 1000);
html,bodyのゴール地点へ1000ミリ秒(1秒)かけて移動
「$(“html,body”)」大外の枠であるhtmlもしくはbody要素を取得 ※ブラウザによって大外の対象がhtml,bodyとあるので両方指定
「.animate({scrollTop : goalTop}, 1000)」animate関数で対象要素「html,body」のゴール地点y座標「{scrollTop : goalTop}」 へ「1000ミリ秒」かけて移動する
$("a[href^=#]").click(function() { : return false; });
リンクの機能を無効化する
a要素に「false」を返して(return false)通常のリンク移動を無効にする
同じカテゴリーのコンテンツ