js实现页面定位

使用scrollIntoView方法

通过调用元素的scrollIntoView()方法实现平滑滚动定位。该方法接受一个配置对象，可设置behavior（平滑/瞬间）和block（垂直对齐方式）等参数。

document.getElementById('target').scrollIntoView({
  behavior: 'smooth',
  block: 'start'
});

使用scrollTo方法

通过window.scrollTo()实现精确坐标定位。支持传递坐标对象或使用options参数配置平滑滚动。

// 坐标模式
window.scrollTo(0, 500);

// 选项模式
window.scrollTo({
  top: 500,
  left: 0,
  behavior: 'smooth'
});

锚点定位

传统HTML锚点方式结合CSS消除跳动。需在目标元素设置id属性，并通过<a>标签的href指向该ID。

<a href="#section2">跳转第二节</a>
<div id="section2">目标内容</div>

<style>
  html {
    scroll-behavior: smooth;
  }
</style>

自定义动画实现

通过requestAnimationFrame实现自定义滚动动画，适合需要特殊动效的场景。

function smoothScroll(target, duration) {
  const targetElement = document.querySelector(target);
  const targetPosition = targetElement.getBoundingClientRect().top;
  const startPosition = window.pageYOffset;
  let startTime = null;

  function animation(currentTime) {
    if (!startTime) startTime = currentTime;
    const timeElapsed = currentTime - startTime;
    const run = ease(timeElapsed, startPosition, targetPosition, duration);
    window.scrollTo(0, run);
    if (timeElapsed < duration) requestAnimationFrame(animation);
  }

  function ease(t, b, c, d) {
    t /= d/2;
    if (t < 1) return c/2*t*t + b;
    t--;
    return -c/2*(t*(t-2)-1) + b;
  }

  requestAnimationFrame(animation);
}

监听滚动事件

结合Intersection Observer API实现动态定位检测，适用于需要根据元素可见状态触发操作的情况。

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('元素进入视口');
    }
  });
});

observer.observe(document.querySelector('#target'));

兼容性处理

针对旧版浏览器提供polyfill方案。现代方法需检测API支持情况，必要时回退到基础实现。

// scroll-behavior polyfill
if (!('scrollBehavior' in document.documentElement.style)) {
  require('smoothscroll-polyfill').polyfill();
}