スムーススクロールを作る – 基礎
公開日:2014年11月03日
ページトップへするするとスクロールするプログラムを作ります。
必要な値は？
- ページ内スクロールをした際のゴール地点の値：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）通常のリンク移動を無効にする
同じカテゴリーのコンテンツ
