本文介绍如何使用jquery实现基于窗口高度的整页滚动效果，即每次滚动触发时自动向上或向下跳转一整屏，避免逐像素滚动，提升浏览体验。
本文介绍如何使用jquery实现基于窗口高度的整页滚动效果，即每次滚动触发时自动向上或向下跳转一整屏，避免逐像素滚动，提升浏览体验。
在构建单页长内容网站（如产品介绍页、作品集或引导页）时，用户常期望“整页翻动”而非细微滚动——这不仅提升视觉节奏感，也增强交互一致性。原生滚动事件默认逐像素响应，而通过 jQuery 结合 scrollTop 动画可精准控制每次滚动步进为一整个视口高度（$(window).height()）。
核心实现逻辑
关键在于监听 scroll 事件，对比当前与上一次滚动位置（scrollTop），判断滚动方向，并对 ,
jQuery 1.12.4
下载
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
var lastScrollTop = 0;
$(window).scroll(function(event) {
var st = $(this).scrollTop();
var windowHeight = $(window).height();
if (st > lastScrollTop) {
// 向下滚动： scrollTop 增加一个视口高度
$('html, body').stop().animate({
scrollTop: '+=' + windowHeight
}, 100);
} else {
// 向上滚动： scrollTop 减少一个视口高度
$('html, body').stop().animate({
scrollTop: '-=' + windowHeight
}, 100);
}
lastScrollTop = st;
});
✅ 为何选择 'html, body'？
不同浏览器对滚动容器的默认处理不同（Chrome 用 body，Firefox/Safari 偏好 html），同时指定二者可确保跨浏览器兼容性；.stop() 防止动画队列堆积导致卡顿。
注意事项与优化建议
- 防抖与节流非必需，但需避免重复触发：上述代码已通过 lastScrollTop 记录状态，天然规避了连续触发问题；若发现快速滚动时跳转错乱，可增加 setTimeout 延迟重置 lastScrollTop（推荐延迟 100–150ms）。
-
边界处理（可选增强）：当前代码未限制滚动范围，可能导致顶部/底部空白。如需停驻于首尾，可添加判断：
const maxScroll = $(document).height() - windowHeight; if (st > lastScrollTop && st 0) { /* 向上滚动 */ } - 移动端适配提醒：iOS Safari 对 scrollTop 动画支持较弱，建议结合 scroll-behavior: smooth CSS 属性作为降级方案（需在 html 元素上设置），或引入 wheel 事件配合 preventDefault() 实现更可控的手势滚动。
完整示例结构（HTML + CSS + JS）
<title>整页滚动演示</title><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><style>
body {
margin: 0;
font-family: Arial, sans-serif;
line-height: 1.6;
overflow-x: hidden; /* 防止横向滚动干扰 */
}
.content {
height: 200vh; /* 确保足够长以测试滚动 */
background: linear-gradient(to bottom, #f0f8ff, #e0f7fa, #b2ebf2);
padding: 4rem 2rem;
}
</style><div class="content">
<h1>整页滚动演示</h1>
<p>尝试使用鼠标滚轮或触摸板滚动——每次操作将精确跳转一整屏。</p>
</div>
<script>
$(function() {
var lastScrollTop = 0;
$(window).scroll(function() {
var st = $(this).scrollTop();
var hg = $(window).height();
if (st > lastScrollTop) {
$('html, body').stop().animate({ scrollTop: '+=' + hg }, 100);
} else if (st < lastScrollTop) {
$('html, body').stop().animate({ scrollTop: '-=' + hg }, 100);
}
lastScrollTop = st;
});
});
</script>
该方案简洁可靠，适用于大多数 PC 端场景。如需更高定制性（如键盘方向键支持、锚点联动、滚动进度指示），可在本基础逻辑上扩展事件监听与状态管理模块。
