html中使用JQ自定义锚点偏移量

一只欢喜2023-11-11 15:08

问题：一般情况下使用href跳转达到效果。如果页面中头部固定住了，点击瞄点的时候自动是最上面，头部会给它覆盖掉一部分，所以要在点击之后额外再加头部高度

html 复制代码

  <a href="#aa">Technical Documents</a>
  <div id="aa">aaaaaaaaaaa</div>

javascript 复制代码

// 当点击瞄点时执行滚动动作
$('a[href="#aa"]').on('click', function(e) {
  e.preventDefault(); // 阻止默认行为
  var targetPosition = $('#aa').offset().top; // 获取瞄点位置
  $('html, body').animate({
    scrollTop: targetPosition + 100 // 滚动到瞄点位置再额外往下滚动100px
  }, 800); // 滚动持续时间
});

如果有多个的话，封装js

javascript 复制代码

// 当点击瞄点时执行滚动动作
function scrollToAnchor(anchor, offset) {
  $('a[href="' + anchor + '"]').on('click', function(e) {
    e.preventDefault(); // 阻止默认行为
    var targetPosition = $(anchor).offset().top; // 获取瞄点位置
    $('html, body').animate({
      scrollTop: targetPosition - offset // 滚动到瞄点位置再额外往下滚动指定的偏移量
    }, 800); // 滚动持续时间
  });
}

// 使用封装的函数
scrollToAnchor('#aa', 200);