jQuery One Page Scroll是一個非常實用的插件,可以將頁面劃分成多個版塊,讓用戶只需滾動鼠標或滑動手指即可直接跳轉到下一個版塊,而無需瀏覽器滑動條或點擊鏈接。
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jQuery-One-Page-Nav/3.0.0/jquery.nav.min.js"></script>
<script src="jquery.onepage-scroll.min.js"></script>
<div class="main">
<section class="section1">
<h1>Section 1</h1>
</section>
<section class="section2">
<h1>Section 2</h1>
</section>
<section class="section3">
<h1>Section 3</h1>
</section>
</div>
<script>
$(".main").onepage_scroll();
</script>
在代碼中,先引入jQuery和依賴的mousewheel和nav插件,再引入One Page Scroll插件。最后,在HTML中定義多個section元素,并在JavaScript中調用onepage_scroll()函數即可實現頁面劃分。
此外,One Page Scroll還提供了多個可選參數,可自定義每個版塊的動畫效果、導航的樣式等。具體可參考官方文檔。