如何用JavaScript实现高级平滑粘性滚动效果

实现高级平滑粘性滚动效果的核心是通过JavaScript控制页面滚动行为，替代浏览器默认的生硬滚动，同时结合粘性定位的逻辑让特定模块在滚动到指定位置时保持稳定展示。

核心实现原理

平滑粘性滚动的实现主要依赖三个核心逻辑：首先是监听用户的滚动操作或者点击锚点等触发滚动的行为，其次是通过计算目标滚动位置和当前滚动位置的差值，最后使用requestAnimationFrame逐帧调整滚动位置，实现平滑过渡。而粘性效果则是通过判断目标元素的位置，在滚动到阈值时切换元素的定位方式实现。

基础滚动容器准备

首先我们需要准备基础的HTML结构，包含一个可滚动的容器和对应的粘性模块：

<div class="scroll-container">
  <section class="section">第一部分内容</section>
  <section class="section sticky-target">
    <div class="sticky-inner">粘性模块内容</div>
  </section>
  <section class="section">第三部分内容</section>
</div>

对应的基础CSS样式如下，这里先设置容器的滚动属性和模块的基础样式：

.scroll-container {
  height: 100vh;
  overflow-y: auto;
  scroll-behavior: auto; /* 禁用默认平滑滚动，后续用JS控制 */
}
.section {
  height: 800px;
  padding: 20px;
  border-bottom: 1px solid #eee;
}
.sticky-target {
  position: relative;
  height: 400px;
}
.sticky-inner {
  padding: 20px;
  background: #f5f5f5;
}

平滑滚动函数实现

我们先实现一个通用的平滑滚动到指定位置的函数，这个函数会处理滚动的动画逻辑，避免直接使用window.scrollTo的生硬效果：

/**
 * 平滑滚动到指定位置
 * @param {HTMLElement} container 滚动容器，默认是window
 * @param {number} targetPosition 目标滚动位置
 * @param {number} duration 滚动动画时长，单位毫秒
 */
function smoothScrollTo(container, targetPosition, duration = 500) {
  // 判断滚动容器是window还是普通元素
  const isWindow = container === window;
  const startPosition = isWindow ? window.pageYOffset : container.scrollTop;
  const distance = targetPosition - startPosition;
  let startTime = null;

  function animationStep(currentTime) {
    if (!startTime) startTime = currentTime;
    const timeElapsed = currentTime - startTime;
    // 使用缓动函数让滚动更自然，这里是 easeInOutQuad 缓动
    const progress = Math.min(timeElapsed / duration, 1);
    const easeProgress = progress < 0.5 
      ? 2 * progress * progress 
      : 1 - Math.pow(-2 * progress + 2, 2) / 2;
    const currentPosition = startPosition + distance * easeProgress;

    if (isWindow) {
      window.scrollTo(0, currentPosition);
    } else {
      container.scrollTop = currentPosition;
    }

    if (timeElapsed < duration) {
      requestAnimationFrame(animationStep);
    }
  }

  requestAnimationFrame(animationStep);
}

粘性滚动逻辑实现

接下来实现粘性效果的逻辑，当粘性模块滚动到容器顶部时，让内部元素固定定位，模拟粘性效果：

// 获取相关DOM元素
const scrollContainer = document.querySelector('.scroll-container');
const stickyTarget = document.querySelector('.sticky-target');
const stickyInner = document.querySelector('.sticky-inner');

// 监听容器滚动事件
scrollContainer.addEventListener('scroll', function() {
  const containerTop = scrollContainer.getBoundingClientRect().top;
  const targetTop = stickyTarget.getBoundingClientRect().top;
  const targetBottom = stickyTarget.getBoundingClientRect().bottom;
  const innerHeight = stickyInner.offsetHeight;

  // 当粘性模块顶部到达容器顶部时，固定内部元素
  if (targetTop <= containerTop && targetBottom > containerTop + innerHeight) {
    stickyInner.style.position = 'fixed';
    stickyInner.style.top = containerTop + 'px';
    stickyInner.style.width = stickyTarget.offsetWidth + 'px';
  } else if (targetBottom <= containerTop + innerHeight) {
    // 当粘性模块底部离开容器时，恢复相对定位
    stickyInner.style.position = 'absolute';
    stickyInner.style.top = 'auto';
    stickyInner.style.bottom = '0';
    stickyInner.style.width = '100%';
  } else {
    // 未触发粘性状态时，恢复默认样式
    stickyInner.style.position = 'relative';
    stickyInner.style.top = '0';
    stickyInner.style.bottom = 'auto';
    stickyInner.style.width = '100%';
  }
});

锚点点击触发平滑粘性滚动

我们还可以给页面添加锚点按钮，点击时触发平滑滚动到对应的粘性模块位置：

<button class="anchor-btn" data-target=".sticky-target">跳转到粘性模块</button>

对应的JavaScript逻辑如下：

// 给所有锚点按钮添加点击事件
document.querySelectorAll('.anchor-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    const targetSelector = this.getAttribute('data-target');
    const targetElement = document.querySelector(targetSelector);
    if (!targetElement) return;

    // 计算目标元素相对于滚动容器的位置
    const containerTop = scrollContainer.getBoundingClientRect().top + scrollContainer.scrollTop;
    const targetTop = targetElement.getBoundingClientRect().top + scrollContainer.scrollTop;
    // 滚动到目标位置上方留20px的间距
    const targetPosition = targetTop - 20;

    // 调用平滑滚动函数
    smoothScrollTo(scrollContainer, targetPosition, 600);
  });
});

优化注意事项

• 滚动事件建议使用节流处理，避免频繁触发导致的性能问题，不过requestAnimationFrame本身已经做了帧率控制，简单场景下也可以直接使用。
• 如果页面有多个粘性模块，需要把粘性逻辑封装成可复用的函数，避免重复代码。
• 在移动端使用时，需要注意触摸滚动的兼容性，部分场景下可能需要额外处理touchmove事件。
• 如果滚动容器不是window，需要确保所有位置计算都基于容器的相对位置，避免计算偏差。

实际开发中可以根据需求调整滚动时长、缓动函数，以及粘性触发的阈值，让效果更贴合页面的整体设计风格。

JavaScript平滑滚动粘性滚动custom_scroll修改时间：2026-06-14 05:51:40