零基础建站培训教程介绍

当前位置:

JQUERY实现锚点链接平滑滚动方法

在前面的Dreamweaver CS6视频教程中,我们介绍了Dreamweaver锚点链接制作方法,锚点链接在实际做网站过程中也会经常用到。但锚点链接有一个缺点,就是我们点击锚点链接某一栏目时就立即跳到相应的版块,用户体验很差。

今天学做网站论坛就来解决这个问题,让锚点链接实现平滑滚动。

方法/步骤

    1. 实现锚点链接平滑滚动,需要先入引JQUERY,它是基于JQUERY实现的。
      
      
      <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    2. 下载平滑滚动插件。下载地址:链接: https://pan.baidu.com/s/1NW_GEhXiugkaKiZ4Dcxlvw 提取码: urxi
    3. 在</head>标签上面放上引入平滑滚动插件代码。(注意修改路径)
      
      
      <script src="js/jquery.singlePageNav.min.js"></script>
    4. 最后是在</body>标签上面放上锚点链接平滑滚动控制JS代码。(注意修改代码里的class名称)
      
      
      <script type="text/javascript">

      $(function(){
              /*导航跳转效果插件*/
               $('.tabnav').singlePageNav({ });        
               })

      </script>
    5. 这样就实现了锚点链接平滑滚动了。

一条回应:“JQUERY实现锚点链接平滑滚动方法”

  1. 学习建网站学员 阿萨德说道:

    谢谢

发表评论

电子邮件地址不会被公开。 必填项已用*标注

学习建网站请选择学做网站论坛零基础建站课程