当前位置：首页 > JavaScript

js实现锚点跳转

2026-04-04 10:46:32JavaScript

实现锚点跳转的方法

使用JavaScript实现锚点跳转可以通过以下几种方式完成，每种方法适用于不同的场景。

通过scrollIntoView方法

Element.scrollIntoView()方法可以让元素滚动到可视区域，支持平滑滚动效果。

document.getElementById('targetElement').scrollIntoView({ behavior: 'smooth' });

通过修改window.location.hash

js实现锚点跳转

直接修改window.location.hash属性可以实现传统的锚点跳转，但滚动效果可能不够平滑。

window.location.hash = '#targetId';

使用scrollTo方法

window.scrollTo()方法可以精确控制滚动位置，结合getBoundingClientRect获取目标元素的位置。

js实现锚点跳转

const target = document.getElementById('targetElement');
const offset = target.getBoundingClientRect().top + window.pageYOffset;
window.scrollTo({ top: offset, behavior: 'smooth' });

添加事件监听实现点击跳转

为按钮或链接添加点击事件，触发锚点跳转。

document.querySelector('.jump-button').addEventListener('click', () => {
  document.getElementById('targetElement').scrollIntoView({ behavior: 'smooth' });
});

平滑滚动兼容性处理

如果需要支持旧版浏览器，可以引入polyfill或使用requestAnimationFrame实现自定义平滑滚动。

function smoothScrollTo(targetId) {
  const target = document.getElementById(targetId);
  const startPosition = window.pageYOffset;
  const targetPosition = target.getBoundingClientRect().top + startPosition;
  const distance = targetPosition - startPosition;
  const duration = 500;
  let startTime = null;

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

  function easeInOutQuad(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);
}