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

一只欢喜

已于 2023-11-07 17:44:49 修改

阅读量529

点赞数 1

分类专栏： HTML、CSS、JS和jQ的前端开发应用文章标签：前端 java javascript

于 2023-11-07 17:44:35 首次发布

本文链接：https://blog.csdn.net/qq_44866810/article/details/134272530

版权

HTML、CSS、JS和jQ的前端开发应用专栏收录该内容

25 篇文章 0 订阅

订阅专栏

文章讲述了如何在JavaScript中处理页面头部固定的状况，当点击带有锚点的链接时，确保内容区域能正确滚动到目标位置，避免头部遮挡。介绍了两种方法，包括直接操作和封装函数以实现动态滚动并调整偏移量。

摘要由CSDN通过智能技术生成

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


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

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

如果有多个的话，封装js

// 当点击瞄点时执行滚动动作
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);