ページトップへするするとスクロールするプログラムを作ります。
必要な値は?
- ページ内スクロールをした際のゴール地点の値:html,bodyのy座標「0」
画面に必要なパーツは?
- 高さのあるコンテンツ
- ページトップへ移動する為のリンク(スタート地点)
高さのあるコンテンツ
<!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="#pagetop">ページトップへ戻る</a></p> </div>
ページスクロールのロジックを考える
- (jQueryのライブラリを読み込む)
- ページ内リンクがクリックされる(イベント取得)
- html,bodyのy座標「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() { $("html,body").animate({scrollTop : 0}, 1000); return false; }); </script>
解説
$("a[href=#]").click(function() { : });
ページ内リンクがクリックされる(イベント取得)
「$(“a[href=#]”)」a要素のhref属性([ ]:属性を意味)の値が「#」の要素
「.click(function() {・・・})」クリックされた時に無名関数を実行
$("html,body").animate({scrollTop : 0}, 1000);
html,bodyのy座標「0」へ1000ミリ秒(1秒)かけて移動
「$(“html,body”)」大外の枠であるhtmlもしくはbody要素を取得 ※ブラウザによって大外の対象がhtml,bodyとあるので両方指定
「.animate({scrollTop : 0}, 1000)」animate関数で対象要素「html,body」の上部位置y座標「0」「{scrollTop : 0}」 へ「1000ミリ秒」かけて移動する
$("a[href=#]").click(function() { : return false; });
リンクの機能を無効化する
a要素に「false」を返して(return false)通常のリンク移動を無効にする
同じカテゴリーのコンテンツ