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

自定义锚点偏移量"/>

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

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

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

js 

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