はじめに
「Webサイトで軽くスクロールすると自動的に1ページ分スクロールされるやつ」を実装したい。
デモはこちら。
ちなみに、jQueryを使います。
実装方法
Scrollify.jsを使って実装していきます。
jQuery1.7以上が必要らしい。
コード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- JS -->
<script src="js/jquery.scrollify.js" type="text/javascript"></script>
<script type="text/javascript">
var option = {
section: '.contents', //1ページで表したいコンテンツのclass名
easing: "swing",
scrollSpeed: 600,
scrollbars: true,
};
$(function() {
$.scrollify(option);
});
</script>
<!--CSS-->
<style>
html, body{
height: 100%;
width: 100%;
}
.contents{
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div class="contents" data-section-name="section1">ひとつめ</div>
<div class="contents" data-section-name="section2">ふたつめ</div>
<div class="contents" data-section-name="section3">みっつめ</div>
<div class="contents" data-section-name="section4">よっつめ</div>
</body>
</html>