使用scrollto实现平滑滚动；2. 通过offsettop点击跳转锚点；3. 监听scroll事件动态显示返回顶部按钮；4. 计算滚动比例实现进度条。结合原生js方法可提升页面交互体验，建议配合css的scroll-behavior兼容处理。
页面滚动效果在现代网页设计中非常常见，通过 JavaScript 可以轻松实现平滑滚动、锚点跳转、滚动监听等交互功能。下面介绍几种实用的 JS 滚动脚本实现方式，并附带代码解析。
1. 实现平滑滚动到指定位置
使用 Window.scrollTo() 方法结合滚动选项，可以让页面以平滑动画的方式滚动到目标位置。
示例代码： ```javascript // 平滑滚动到页面顶部 window.scrollTo({ top: 0, behavior: 'smooth' });// 滚动到距离页面顶部500像素的位置 window.scrollTo({ top: 500, behavior: 'smooth' });
<p>behavior 设置为 'smooth' 即启用平滑滚动效果，浏览器原生支持，无需额外库。</p>
<H3>2. 点击按钮跳转到指定锚点</H3>
<p>常用于导航菜单点击后跳转到页面不同区域。可以通过元素的 ID 获取其位置并滚动过去。</p>
<font color="#0000FF">示例代码：</font>
```javascript
document.getElementById('scroll-btn').addEventListener('click', function(e) {
e.preventDefault();
const targetElement = document.getElementById('section2');
const offsetTop = targetElement.offsetTop;
window.scrollTo({
top: offsetTop,
behavior: 'smooth'
});
});offsetTop 获取元素距离页面顶部的像素值，搭配 scrollTo 实现精准跳转。
3. 监听滚动事件实现动态效果
可以监听用户的滚动行为，执行如显示/隐藏按钮、触发动画等操作。
示例：滚动一定高度后显示“回到顶部”按钮 ```javascript const backToTopButton = document.getElementById('back-to-top');window.addEventListener('scroll', function() { if (window.pageYOffset > 300) { backToTopButton.style.display = 'block'; } else { backToTopButton.style.display = 'none'; } });
// 点击按钮返回顶部 backToTopButton.addEventListener('click', () => { window.scrollTo({ top: 0, behavior: 'smooth' }); });
<p>pageYOffset 返回当前垂直滚动的像素值，可用于判断滚动状态。</p>
<H3>4. 实现滚动进度条</H3>
<p>在页面顶部或底部添加一个进度条，显示当前浏览进度。</p>
<font color="#0000FF">示例代码：</font>
```javascript
const progressBar = document.getElementById('progress-bar');
window.addEventListener('scroll', () => {
const scrollTop = window.pageYOffset;
const docHeight = document.body.offsetHeight;
const winHeight = window.innerHeight;
const scrolled = (scrollTop / (docHeight - winHeight)) * 100;
progressBar.style.width = scrolled + '%';
});通过计算已滚动高度占总可滚动高度的比例，动态设置进度条宽度。
基本上就这些。合理使用 JS 滚动控制，能显著提升用户体验，关键在于理解 scroll 相关属性和方法的使用场景。不复杂但容易忽略细节，比如元素偏移量计算和兼容性处理。实际开发中建议结合 CSS scroll-behavior: smooth 做降级兼容。
