如何利用js脚本实现页面滚动_js滚动效果脚本制作与代码解析

页面滚动是网页交互中非常常见的功能，无论是点击导航跳转到对应板块的锚点滚动，还是回到顶部的平滑滚动，都可以用js脚本快速实现。下面先介绍核心的滚动方法，再逐步讲解不同场景的实现逻辑。

核心滚动方法介绍

js中实现页面滚动最常用的方法是window.scrollTo，该方法可以指定页面滚动到对应的坐标位置，支持配置滚动行为是否为平滑滚动。

基础语法

window.scrollTo的语法格式如下：

// 基础用法，滚动到x=0，y=500的位置，默认是瞬间跳转
window.scrollTo(0, 500);

// 配置对象用法，支持设置滚动行为
window.scrollTo({
  top: 500, // 垂直方向滚动到的位置
  left: 0,  // 水平方向滚动到的位置
  behavior: 'smooth' // 滚动行为，smooth为平滑滚动，auto为瞬间跳转
});

常见滚动场景实现

场景一：回到顶部平滑滚动

实现点击按钮回到页面顶部的平滑滚动，只需要监听按钮的点击事件，调用scrollTo方法即可。

<button id="backTop">回到顶部</button>
<script>
  // 获取回到顶部按钮
  const backTopBtn = document.getElementById('backTop');
  // 监听点击事件
  backTopBtn.addEventListener('click', () => {
    // 调用scrollTo方法，滚动到顶部，设置平滑滚动
    window.scrollTo({
      top: 0,
      left: 0,
      behavior: 'smooth'
    });
  });
</script>

场景二：锚点板块平滑跳转

点击导航栏的选项，滚动到对应的内容板块，需要先获取目标板块距离页面顶部的距离，再调用滚动方法。

<!-- 导航栏 -->
<ul class="nav">
  <li data-target="section1">板块一</li>
  <li data-target="section2">板块二</li>
  <li data-target="section3">板块三</li>
</ul>

<!-- 内容板块 -->
<div id="section1" class="content-section">这是第一个板块的内容</div>
<div id="section2" class="content-section">这是第二个板块的内容</div>
<div id="section3" class="content-section">这是第三个板块的内容</div>

<script>
  // 获取所有导航项
  const navItems = document.querySelectorAll('.nav li');
  // 遍历导航项绑定点击事件
  navItems.forEach(item => {
    item.addEventListener('click', () => {
      // 获取目标板块的id
      const targetId = item.getAttribute('data-target');
      // 获取目标板块元素
      const targetSection = document.getElementById(targetId);
      // 获取目标板块距离页面顶部的距离
      const targetTop = targetSection.offsetTop;
      // 滚动到目标位置，设置平滑滚动
      window.scrollTo({
        top: targetTop,
        behavior: 'smooth'
      });
    });
  });
</script>

场景三：滚动监听实现导航高亮

页面滚动时，对应板块的导航项高亮，需要监听页面的滚动事件，判断当前滚动位置对应的板块。

// 获取所有内容板块
const sections = document.querySelectorAll('.content-section');
// 获取所有导航项
const navItems = document.querySelectorAll('.nav li');

// 监听页面滚动事件
window.addEventListener('scroll', () => {
  // 获取当前页面滚动的垂直距离
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  // 遍历所有板块，判断当前滚动位置对应的板块
  sections.forEach((section, index) => {
    const sectionTop = section.offsetTop;
    const sectionHeight = section.offsetHeight;
    // 如果当前滚动位置在板块范围内，高亮对应的导航项
    if (scrollTop >= sectionTop - 100 && scrollTop < sectionTop + sectionHeight - 100) {
      // 先移除所有导航项的高亮类
      navItems.forEach(nav => nav.classList.remove('active'));
      // 给当前对应的导航项添加高亮类
      navItems[index].classList.add('active');
    }
  });
});

注意事项

• 如果页面有固定定位的导航栏，计算目标板块距离顶部的距离时，需要减去导航栏的高度，避免滚动后板块被导航栏遮挡。
• behavior: 'smooth'属性在部分旧版本浏览器中不支持，如果需要兼容旧浏览器，可以自己实现平滑滚动的动画逻辑，通过定时器逐步修改scrollTop的值实现。
• 滚动事件触发的频率很高，如果滚动事件中的逻辑比较复杂，建议使用节流函数优化，避免性能问题。

JavaScript页面滚动滚动效果scrollTo修改时间：2026-07-05 07:39:11