零基础学做网站培训介绍

当前位置:

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. 这样就实现了锚点链接平滑滚动了。

相关阅读:

discuz如何逐条滚动显示论坛帖子

jquery特效:实现自动向上逐个滚动图片展示

怎么将网站评论以弹幕形式滚动展示

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

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

    谢谢

发表评论

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

相关教程

  • 在很多的图片网站上,全使用到3d轮播图效果,可以不断的实现旋转轮播,最大气美观。效果如图:对于这样一种高大上的3D旋转轮播图,做起来并不是想
  • 图片轮播特效在网站制作过程中经常会用到,它可以让一个“静止”的网站“动”起来。在学做网站论坛以前的建站教程中,也讲过如何制作网站幻灯片,我们在学
  • 在自己建网站过程中,由于版面限制,很多内容需要制作成一TAB选项卡,这样在同样一个尺寸的版块,可以显示成倍的内容。TAB选项卡在很多在的大量网站中
  • DW如何制作HTML锚点链接 视频教程 (1117425 次浏览)
    什么是锚点链接锚点链接(也叫书签链接)常常用于那些内容庞大繁琐的网页,通过点击命名锚点,不仅让我们能指向文档,还能指向页面里的特定段落,更
  • 在前面的Dreamweaver CS6视频教程中,我们介绍了Dreamweaver锚点链接制作方法,锚点链接在实际做网站过程中也会经常用到。但锚点链接有一个缺点,就是
  • 做锚点链接的方法①:设置一个锚点链接<a href="#miao">去找喵星人</a>;(注意:href属性的属性值特别前面要加#)②:在页面中需要
  • 1、导航的固定:.navbar-fixed-top2、导航的锚链接:在链接地址上写上区块的ID名3、导航的平滑滚动:单页面导航插件下载:jquery.singlePageN
  • 很多企业网站的首页都会做一种动态滚动展示企业产品的效果,是企业网站建设常用的方法。既展示了企业的产品,又让整个网站动静结合,不再毫无生气。
  • 我们在学习网站制作过程,发现很多网站都采用tab切换菜单来显示不同栏目的内容,这样即可以节省网站版面,也可以更多的显示网站的栏目内容。如何在自
  • 有些学员在学习制作网站时,想在自己的网站上添加一些左右滚动的切换图效果,这种效果可以实现自动切换和手动左右切换。如果要实现在网站上增加切换图