头部导航navbar点击自动滚动

最新推荐文章于 2024-02-01 11:11:53 发布

欣琪

最新推荐文章于 2024-02-01 11:11:53 发布

阅读量3.1k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_41038929/article/details/88844897

版权

js 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的头部导航栏点击效果。当点击导航项时，页面将平滑滚动到对应位置，并高亮当前选中的导航项。该效果考虑了不同屏幕尺寸下的适配问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

// 头部导航点击事件
    $(".tab-head li").click(function() {
        var moveX = $(this).position().left + $(this).parent().scrollLeft();
        var pageX = document.documentElement.clientWidth; //设备的宽度
        var blockWidth = $(this).width();
        var left = moveX - (pageX / 2) + (blockWidth / 2);
        $(".tab-head").animate({ scrollLeft: left }, 400);
        $(this).addClass("active").siblings().removeClass("active");
    });