美文网首页
锚链接&&效果优化

锚链接&&效果优化

作者: 禾苗种树 | 来源:发表于2021-11-28 17:09 被阅读0次

    用锚链接时,有时会有卡顿效果,这时 可不用锚链接这个方法,
    思路:获取到想要跳转的标签,获得页面偏移数值,使用scrollTop滑动到该区域

    <div class="y_hcdh_list">
                    <div><p>导航</p></div>
                    <div><a class="y_active" href="javascript:void(0);">11</a></div>
                    <div><a  href="javascript:void(0);">22</a></div>
                    <div><a  href="javascript:void(0);">33</a></div>
                    <div><a  href="javascript:void(0);">44</a></div>
                </div>
    
    $('.y_list>div').not('.y_list>div:nth-child(1)').click(function(){
            // 样式
            $(this).children('a').addClass('y_active y_hover');
            $(this).siblings().children('a').removeClass('y_active y_hover');
    
            
            //过渡动画
            let idNanme=['#11','#22','#33','#44'];
            let index = $(this).index();
            
            let scrolH = $(`${idNanme[index-1]}`).offset().top;
            $('html,body').animate({scrollTop:`${scrolH}`},500);
            
            
        })

    相关文章

      网友评论

          本文标题:锚链接&&效果优化

          本文链接:https://www.haomeiwen.com/subject/tlelxrtx.html