jquery 锚点

2026-03-16 11:29:23jquery

jQuery 锚点跳转实现方法

平滑滚动到页面锚点 使用 jQuery 的 animate() 方法实现平滑滚动效果。需确保页面中存在对应的锚点（如 <a id="section1"></a>）。

$('a[href^="#"]').click(function() {
  var target = $(this).attr('href');
  $('html, body').animate({
    scrollTop: $(target).offset().top
  }, 800); // 800ms为滚动动画时长
  return false;
});

动态添加锚点 通过 jQuery 动态生成锚点元素并跳转：

// 创建锚点
$('body').append('<div id="dynamicAnchor"></div>');

// 跳转到锚点
$('html, body').animate({
  scrollTop: $('#dynamicAnchor').offset().top
}, 500);

带偏移量的锚点跳转 当页面有固定导航栏时，需要补偿高度避免遮挡：

var offset = 70; // 根据导航栏高度调整
$('a[href^="#"]').click(function() {
  var target = $(this).attr('href');
  $('html, body').animate({
    scrollTop: $(target).offset().top - offset
  }, 600);
});

检测锚点变化 监听 URL 中 hash 的变化：

$(window).on('hashchange', function() {
  var target = window.location.hash;
  if ($(target).length) {
    $('html, body').animate({
      scrollTop: $(target).offset().top
    }, 400);
  }
});

注意事项

锚点元素需设置 id 属性而非 name 属性
确保目标元素在 DOM 加载完成后存在
对隐藏元素（display:none）需先显示再执行跳转
移动端可能需要额外的 touch 事件处理

兼容性解决方案

对于老旧浏览器，可添加回调函数处理不支持的情况：

jquery 锚点

$('a[href^="#"]').click(function() {
  var target = $(this).attr('href');
  if (history.pushState) {
    history.pushState(null, null, target);
  }
  $('html, body').animate({
    scrollTop: $(target).offset().top
  }, 800, function() {
    if (!history.pushState) {
      window.location.hash = target;
    }
  });
  return false;
});

标签: jquery