ページ内リンクをゆっくりスクロール「Smooth Scroll」
当ページのリンクには広告が含まれています。
スポンサーリンク
ページ内リンクのゆっくりスクロールを実装するプラグイン「Smooth Scroll」を紹介します。
jQueryプラグイン「Smooth Scroll」
「Smooth Scroll」は、IDや要素を指定するだけで簡単にページ内リンクのゆっくりスクロールが実装できます。
オプションでは「スクロールの速度」や「アニメ効果」を指定することもできます。
スポンサーリンク
デモをご覧ください。左サイドに固定メニューがあるので、リンクをクリックしてみてください。ゆっくりとスムーズにスクロールします。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Smooth Scrollのデモ - jQueryまとめのカルマ</title>
<meta name="description" content="Smooth Scrollのサンプル／デモでーす。">
<style type="text/css">
.container {
margin: 40px auto;
width: 600px;
}
.menu {
position: fixed;
margin-left: -200px;
width: 140px;
}
[id*=contents] {
height: 500px;
}
</style>
</head>
<body>
<div class="container">
<ul class="menu">
<li><a href="#contents-1">めにゅ〜壱</a></li>
<li><a href="#contents-2">めにゅ〜弐</a></li>
<li><a href="#contents-3">めにゅ〜参</a></li>
</ul>
<div id="contents-1">
壱<br />
1111111111111111111111111111111111111111111111111111111111
</div>
<div id="contents-2">
弐<br />
22222222222222222222222222222222222222222222222222222222222
</div>
<div id="contents-3">
参<br />
3333333333333333333333333333333333333333333333333333333333
</div>
</div>
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<script src="jquery.smooth-scroll.js"></script>
<script>
$(document).ready(function() {
$('ul.menu a').smoothScroll();
});
</script>
</body>
</html>
スポンサーリンク