我的意思是滚动时会轻松。
var $pages = $(“.page”),
tot = $pages.length, c = 0, pagePos = 0, down = 0, listen = true; $('html, body').on('DOMMouseScroll mousewheel', function(e) { e.preventDefault(); if(!listen)return; listen = false; down = e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0; c = Math.min(Math.max(0, down ? ++c : --c), tot-1); pagePos = $pages.eq(c).offset().top; $(this).stop().animate({scrollTop: pagePos}, 650, function(){ listen = true; }); }); *{margin:0;} .page{min-height:100vh;} <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="page" style="background:#0bf">PAGE 1</div> <div class="page" style="background:#fb0">PAGE 2</div> <div class="page" style="background:#0fb">PAGE 3</div> <div class="page" style="background:#b0f">PAGE 4</div>
PS: 使用.position().top;,如果你的.pages为像一个滚动的DIV内$("#pagesParent")(而不是$('html, body'))
.position().top;
.page
$("#pagesParent")
$('html, body')
注意: 对于 移动设备, 您可能希望针对浏览器的标签栏高度调整值(最好还是完全避免这种情况)。你有主意