jquery导航栏滚动定位楼层功能实现




$(document).ready(function(){
    // 确保导航栏链接与对应的楼层对象同步
    $('.navbar a[href*="#"]').click(function(event){
        // 阻止a标签默认的点击行为
        event.preventDefault();
 
        // 获取目标楼层的ID
        var targetID = $(this).attr("href");
 
        // 使用animate方法平滑滚动到目标楼层
        $('html, body').animate({
            scrollTop: $(targetID).offset().top
        }, 1000);
    });
});

这段代码首先确保文档在文档就绪后执行代码，然后为导航栏中的链接添加点击事件处理函数。当用户点击链接时，该函数会阻止默认的点击行为，并获取链接的href属性中的目标楼层ID。然后使用jQuery的animate方法和offset方法平滑滚动到目标楼层。这是一个常见的使用jQuery实现的功能，适用于创建带有滚动定位的导航栏。

jquery导航栏滚动定位楼层功能实现

评论已关闭

推荐阅读