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

锚链接&&效果优化

作者: 禾苗种树 | 来源:发表于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);
        
        
    })

相关文章

  • 锚文本链接对关键词排名作用及常见问题-鬼叔说运营

    锚文本定义 锚文本,又叫锚文本链接,类似于超链接,超链接可以一个网址、图片、文本形式,锚文本专指文字链接。 锚文本...

  • 锚链接&&效果优化

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

  • JQuery简单实现锚点链接的平滑滚动

    在平时的项目中,我们经常需要一些特效链接,如果使效果进一步加强,我们可以使点击锚点链接平滑滚动到锚点,下面就来给大...

  • SEO专员(SEO工程师)笔试题

    一、请描述关键词选取的基本流程,以及要点说明。 二、请列举出站内优化需要优化的常见标签。 三、请描述你对锚文本链接...

  • 常用标签

    超链接 : 主要实现页面的跳转、下载、锚点超链接的四个伪类(给元素加入特殊的效果):link visited h...

  • AndroidStudio相关设置

    导读 1、设置相关 2、安装常用插件 3、优化 (ps:由于Markdown在简书里对锚点的支持效果不是很好,...

  • 前端学习笔记一一HTML如何添加锚点

    页面添加锚点的三种方式 HTML中的链接,正确的说法应该称作"锚点",它命名锚点链接(也叫书签链接)常常用于那些内...

  • HTML基础学习

    1.1 锚点定位 (难点) 通过创建锚点链接,用户能够快速定位到目标内容。 创建锚点链接分为两步: 1.2 bas...

  • HTML(三)锚点和列表

    锚点标签 .... 作用:同一个文档中创建指向该锚(位置)的链接 定义是用的name属性,锚点链接使用href属性...

  • 三、HTML 图片路径、链接、锚点

    1. 图片路径 2. 链接 链接 锚点

网友评论

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

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