js如何实现锚点机制

2026-01-31 07:10:59JavaScript

实现锚点跳转的基本方法

使用HTML的id属性作为锚点目标，通过<a>标签的href属性指向该ID。例如：

<a href="#section1">跳转到第一节</a>
<div id="section1">这里是第一节内容</div>

平滑滚动效果

通过JavaScript的scrollIntoView()方法实现平滑滚动：

js如何实现锚点机制

document.querySelector('a[href="#section1"]').addEventListener('click', function(e) {
  e.preventDefault();
  document.getElementById('section1').scrollIntoView({ behavior: 'smooth' });
});

动态高亮当前锚点

监听滚动事件，检测当前可见的锚点区域：

window.addEventListener('scroll', function() {
  const sections = document.querySelectorAll('[id^="section"]');
  sections.forEach(section => {
    const rect = section.getBoundingClientRect();
    if (rect.top >= 0 && rect.top <= window.innerHeight/2) {
      // 高亮对应的导航链接
      document.querySelector(`a[href="#${section.id}"]`).classList.add('active');
    } else {
      document.querySelector(`a[href="#${section.id}"]`).classList.remove('active');
    }
  });
});

浏览器历史记录处理

使用history.pushState()更新URL而不刷新页面：

js如何实现锚点机制

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function(e) {
    e.preventDefault();
    const targetId = this.getAttribute('href');
    document.querySelector(targetId).scrollIntoView({ behavior: 'smooth' });
    history.pushState(null, null, targetId);
  });
});

响应式锚点偏移

针对固定导航栏的情况，添加滚动偏移量：

function scrollToAnchor(id) {
  const element = document.getElementById(id);
  const offset = 80; // 导航栏高度
  const position = element.offsetTop - offset;
  window.scrollTo({ top: position, behavior: 'smooth' });
}

兼容性处理

为不支持scrollIntoView的浏览器提供polyfill：

if (!Element.prototype.scrollIntoView) {
  Element.prototype.scrollIntoView = function() {
    const start = window.pageYOffset;
    const target = this.getBoundingClientRect().top + start;
    const duration = 500;
    let startTime = null;

    function animateScroll(time) {
      if (!startTime) startTime = time;
      const progress = time - startTime;
      window.scrollTo(0, easeInOutQuad(progress, start, target - start, duration));
      if (progress < duration) requestAnimationFrame(animateScroll);
    }

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