jQuery scrollTop()方法：控制垂直滚动条位置-代码号

页面滚动是前端交互里特别高频的操作，jQuery 提供了 scrollTop() 方法来处理垂直滚动条。这个方法既能读取当前滚动位置，也能设置滚动条跳到指定位置，一个方法两种用法，记起来也省事。

当滚动条在最顶部时，scrollTop() 返回的值是 0。往下滚一点，数值就跟着变大，单位是像素。

scrollTop() 的两种用法

获取滚动位置：

$(selector).scrollTop();

这行代码返回选中元素里第一个匹配元素的当前垂直滚动位置。如果是整个页面滚动，选择器通常用 $(window)。

设置滚动位置：

$(selector).scrollTop(position);

position 参数是数值，单位像素，表示希望滚动条跳到的垂直位置。设置时会对所有匹配元素生效。

参数说明很简单——就是一个以像素为单位的整数值。设成 0 回到顶部，设成 300 往下滚 300 像素。

先上个简单例子感受一下

读取一个可滚动 div 的当前位置：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        alert("当前滚动位置：" + $("#codeScrollBox").scrollTop() + " px");
    });
});
</script>
</head>
<body>
<div id="codeScrollBox" style="border:1px solid #333; width:200px; height:120px; overflow:auto; padding:8px;">
  代码号学习编程笔记：<br/>
  jQuery 的 scrollTop 方法用于获取或设置滚动条位置。<br/>
  这个方法在前端开发中非常实用。<br/>
  比如做回到顶部按钮、滚动加载更多内容、<br/>
  锚点平滑跳转等场景都离不开它。<br/>
  掌握好 scrollTop 能让页面交互更流畅。
</div><br>
<button>查看垂直滚动位置</button>
<p>先把上面框里的滚动条往下拖一段，再点按钮看数值变化。</p>
</body>
</html>

核心点在这段逻辑里：$("#codeScrollBox").scrollTop() 读取的是 div 内部内容滚动了多少像素。注意 div 必须设了 overflow:auto 或 overflow:scroll 并且内容超出高度才会有滚动条，否则返回值是 0。

设置滚动位置：页面加载后直接跳到指定位置

有时候页面打开就需要让某个容器滚动到特定位置，比如聊天窗口默认显示新消息，或者代码编辑器定位到某一行：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>scrollTop 设置演示</title>
<style>
.scrollDemo {
    background: #e0ffff;
    border: 3px solid #555;
    margin: 10px;
    padding: 10px;
    width: 220px;
    height: 160px;
    overflow: auto;
}
.largeContent {
    margin: 10px;
    padding: 5px;
    border: 2px dashed #888;
    width: 1000px;
    height: 1000px;
    background: #fafad2;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div class="scrollDemo">
    <h3>代码号滚动演示区域</h3>
    <div class="largeContent">
        这块内容又宽又高，撑出了横向和纵向滚动条。<br>
        scrollTop(300) 让垂直滚动条一开始就往下跳 300 像素。
    </div>
</div>

<script>
// 页面加载后直接设置滚动位置
$("div.scrollDemo").scrollTop(300);
</script>
</body>
</html>

打开页面后，div 的垂直滚动条不在最顶部，而是已经往下滚了 300 像素。这就是 scrollTop() 作为 setter 的用法。

实际项目里 scrollTop 的几个典型场景

做了几年前端开发，发现 scrollTop() 频繁出现在这几个地方。

回到顶部按钮。页面上放个固定定位的小按钮，点击后执行 $("html, body").animate({scrollTop: 0}, 600)，页面丝滑地滚回顶部。为什么同时选 html 和 body？因为不同浏览器的滚动容器不一样，Firefox 认 html，Chrome 认 body，两个都写上保证兼容。

滚动加载更多。监听 $(window).scroll() 事件，拿 $(window).scrollTop() 获取当前滚动位置，结合 $(window).height() 和 $(document).height() 算出是否接近底部，触发了就去加载下一页数据。这个模式在列表页、信息流页面里特别常见。

锚点平滑跳转。点击导航链接时，阻止默认的锚点跳转行为，用 animate({scrollTop: 目标位置}) 替代，实现平滑滚动而不是瞬间跳过去，用户体验提升明显。

一些容易踩的坑

scrollTop() 和 offset().top 经常被混用，但它们不是一回事。scrollTop() 是元素内部已滚动的距离，offset().top 是元素相对于文档顶部的坐标位置。做滚动导航高亮时两个都要用到：scrollTop() 判断页面滚到哪了，offset().top 判断每个区块在什么位置，一比对就知道该高亮哪个菜单项。

还有个细节：给一个当前没有滚动条的元素设置 scrollTop(100)，值会被忽略，因为内容不够长根本没得滚。移动端页面上 scrollTop() 的取值和设置有时需要加 window.pageYOffset 作为辅助，尤其在 iOS Safari 的弹性滚动环境下表现有差异。做移动端开发时很好多测几个设备。

scrollTop() 设置值不能为负数，设了也没效果。想要超出顶部边界的效果得用其他方案，比如 CSS 的 transform 配合手势库。

读取页面整体滚动位置

如果滚动条在 window 上（整页滚动），不是某个具体元素，写法是：

// 获取当前滚动位置
var currentScroll = $(window).scrollTop();

// 设置滚动到指定位置
$(window).scrollTop(500);

这个写法在项目里使用频率可能比操作某个 div 的滚动条还高。毕竟大多数页面的滚动发生在整个文档级别。

本节课程知识要点

用 scrollTop() 获取位置时，返回的是第一个匹配元素的当前垂直滚动像素值。用 scrollTop(数值) 设置位置时，对所有匹配元素生效。两者共用一个方法名，根据是否传参自动区分行为。

操作页面级滚动条用 $(window).scrollTop()，操作特定容器用 $(selector).scrollTop()。容器必须内容溢出且有 overflow:auto 或 overflow:scroll 样式。

scrollTop() 配合 animate() 能做平滑滚动动画，这是它和原生 window.scrollTo() 行为的一个重要区别——jQuery 的动画队列机制让滚动过程更可控，可以在动画完成后执行回调。

项目开发中如果发现 scrollTop() 设了值没效果，先检查元素是否真的产生了滚动条，再检查选择器有没有选对元素。滚动条在最顶部时 scrollTop() 等于 0，这是定位基准点。

本文标签：

jQuery scrollTop()方法：控制垂直滚动条位置

感谢您的认可和支持