
スムーススクロールを作る – 基礎
公開日: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)通常のリンク移動を無効にする
同じカテゴリーのコンテンツ