转自:https://blog.csdn.net/luoyu6/article/details/82947713

应用场景:我们把导航固定在页面顶部的时候,点击锚链接跳转到相应的部分时,很可能导航把页面的内容覆盖了

像这样,被导航挡住了一部分:

我们想要的结果:

代码实现:

1.A标签:
<a href="javascript:;" class="navItems" navto="services">服务与支持</a>

其中
href="javascript:;"鼠标放上为了显示小手,如果不需要可以去掉
class="navItems" 必须,为了jquery选择器只获取class="navItems"的A标签
navto="services" 必须,瞄点ID

2.瞄点主体内容:
<div id="services">...内容...</div>

其中id="services" 对应上面的navto="services"

3.js代码:

<script type="text/javascript">
$('.navItems').click(function() {
var navto = $(this).attr('navto');
if(navto != "#") {
    var $div = $('#' + navto);
    var top = $div.offset().top || 0;
    $('html,body').animate({
        'scroll-top': top - 70
        }, 500);
} else {
    $('html,body').animate({
        'scroll-top': 0
       }, 500);

    }

});
</script>

其中70值可以根据需要修改偏移量,500值修改移动速度,500值个人觉得效果不错,可以默认不用修改

最后把js代码复制到</body>....这个位置即可.....</html>

说明:上面js代码需要引入jquery文件才有效

本方法最终效果非常棒,点击A标签时缓慢移动,可以说是解决锚点链接跳转后位置上下偏移的完美好办法!如果用纯href="#"这样锚点实现,效果生硬,用户体验差,而且实现上也差强人意,所以推荐大家使用此方法。

完~

标签: 锚点链接

添加新评论

二维码