导航锚点跟随页面滚动，点击导航锚点快速到达页面位置

最新推荐文章于 2025-11-10 00:29:55 发布

原创最新推荐文章于 2025-11-10 00:29:55 发布 · 5.1k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#js

自己写的专栏收录该内容

15 篇文章

订阅专栏

本文介绍了如何利用JavaScript实现网页导航菜单中锚点链接的功能，当点击导航菜单时，页面能平滑滚动到相应的内容区域，提高用户体验。

var $nav = $(".act-nav");
var nav_ori_top = $nav.offset().top;
// 导航
var $quick_menu = $('a[href*=#quick_]',$nav);
// 需定位到的锚点位置
var $quick_layer = $("span[id^=quick_]");
var nav_count = $quick_layer.length;
// 60 代表是需要去除的高度 如固顶的导航条
var space_top = 60;
$(window).scroll(function(e){
    var w_top = $(window).scrollTop();
    var space = [];
    // 导航条固定在屏幕上
    if (nav_ori_top + space_top <= w_top) {
        $nav.addClass('act-nav-fixed')
    } else {
        $nav.removeClass('act-nav-fixed')
    }

    w_top = w_top + space_top;

    $quick_layer.each(function(i,t){
        space.push($(t).offset().top)
    });
    var flag = 0;
    var len = space.length;
    for (var i = 0; i < len - 1; i++) {
        if (space[i] <= w_top && space[i + 1] >= w_top) {
            flag = i;
            break;
        }
    }
    if (w_top - space[flag] > space[flag + 1] - w_top
    ) {
        flag += 1;
    }
    if (w_top > space[len - 1]) {
        flag = len - 1;
    }
    $quick_menu.eq(flag).addClass('on').siblings().removeClass('on');
});
$quick_menu.on('click',function(){
    $('body,html').animate({
        'scrollTop': $quick_layer.eq($quick_menu.index(this)).offset().top - space_top
    });
    return false;
});