点击导航，滑动到网页中的指定位置（JS实现滑动锚点定位）

最新推荐文章于 2024-07-26 14:14:21 发布

王永存

最新推荐文章于 2024-07-26 14:14:21 发布

阅读量2w

点赞数 3

分类专栏：其他网页常见效果 javascript

本文链接：https://blog.csdn.net/wang1006008051/article/details/79026031

版权

其他同时被 3 个专栏收录

50 篇文章 2 订阅

订阅专栏

javascript

30 篇文章 0 订阅

订阅专栏

网页常见效果

16 篇文章 1 订阅

订阅专栏

在一个网页页面中，可能会分为很多的模块内容，当我点击导航栏的某一项时，希望显示对应的内容，例如，点击下图导航中的报告服务后，希望网页滑动到 “报告服务” 的模块，点击城市品牌滑动到“城市品牌”的模块。

城市品牌模块

js代码

<script>
    $(function () {
        //获取城市模块到顶部的距离 
        var city_top = $('#city_top').offset().top;
        $('.city_li').click(function () {
            $('html,body').animate({scrollTop:city_top},500);
        })
    })
</script>