jQuery
【jQuery】フルページスクロールエフェクトプラグインnaiveScroll
July 25, 2016

naiveScrollは軽量のフルページスクロールエフェクトjQueryプラグイン
基本はsection
<body> <section class="page1"></section> <section class="page2"></section> <section class="page3"></section> </body>
/* use background color */ .page1 { top: 0; background-color: lightcoral; } /* or use background image */ .page2 { top: 100%; background: url("foo.jpg") no-repeat center center; background-size: cover; } /* notice the top property */ .page3 { top: 200%; background-color: lightblue; }
$('#upBtn').click(function () { $(this)._naiveScroll.triggerScroll(100); }); $('#downBtn').click(function () { $(this)._naiveScroll.triggerScroll(-100); });