顶部tab点击时跳到指定位置

最新推荐文章于 2023-07-19 16:33:21 发布

原创最新推荐文章于 2023-07-19 16:33:21 发布 · 2.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#tab

酒店专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何实现顶部tab点击后页面自动滚动到相应内容区域。通过HTML页面代码和JS方法绑定，轻松完成这一功能。只需简单几步，即可让顶部tab具备定位跳转的效果。

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

最近在实现一个顶部tab点击时跳到指定位置的功能，那么我们如何来实现顶部tab点击时跳到指定位置的功能的？下面我们来实现一下

html页面代码：

<div class="tabs" id="gudingweizhi" style="position: absolute; width: 100%;">
                    <div class="backbox"></div>
                    <div class="links Lcfx">
                        <a><h2 class="link active" id="jiudianyudingclick" data-type="order">酒店预订</h2></a>
                        <a><h2 class="link" id="jiaotongweizhiclick" data-type="router">交通位置</h2></a>
                        <a><h2 class="link" id="jiudiankaikuangclick" data-type="intro">酒店概况</h2></a>
                        <a><h2 class="link" id="jiudiandianpingclick" data-type="comment">酒店点评</h2></a>
                    </div>
</div>

JS页面方法绑定：

//酒店点评点击
        $("#jiudiandianpingclick").click(function () {
            $(".Pdetail_part2 h2").removeClass('active');
            $("#jiudiandianpingclick").addClass('active');
            //设置定时器
            timer = setInterval(function () {
                var osTop = document.getElementById('jiudiandianpingdiv').offsetTop - 44;//获取内容距离顶部的高度
                var meicigaodu = window.pageYOffset;//当前高度
                var ispeed; //每次执行滚动的高度
                if (Math.abs(meicigaodu - osTop) > 500) {
                    ispeed = Math.floor(osTop / 2);
                }
                else {
                    ispeed = Math.floor(osTop / 6);
                }
                if (meicigaodu >= osTop) {
                    if ((meicigaodu - osTop) > ispeed) {
                        meicigaodu -= ispeed;
                    }
                    else {
                        meicigaodu = osTop;
                    }
                    document.documentElement.scrollTop = document.body.scrollTop = meicigaodu;//滚动条距离顶部的高度
                    if (osTop >= meicigaodu) {
                        clearInterval(timer);
                    }
                }
                else {
                    if ((ispeed + meicigaodu) < osTop) {
                        meicigaodu += ispeed;
                    }
                    else {
                        meicigaodu = osTop;
                    }
                    document.documentElement.scrollTop = document.body.scrollTop = meicigaodu;//滚动条距离顶部的高度
                    if (osTop <= meicigaodu) {
                        clearInterval(timer);
                    }
                }
            }, 60);
        });