スムーススクロールを作る – 応用
公開日:2014年11月04日
指定位置にするするとスクロールするプログラムを作ります。
必要な値は？
- ページ内スクロールをした際のゴール地点「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：ｘ座標位置の値 top：ｙ座標位置の値
「.top」ｙ座標の値を取得
「var goalTop」にゴール地点のｙ座標の値を代入
$("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）通常のリンク移動を無効にする
同じカテゴリーのコンテンツ
