零基础学做网站培训介绍

当前位置:

如何实现网站锚点链接平滑滚动

做锚点链接的方法

①:设置一个锚点链接<a href="#miao">去找喵星人</a>;(注意:href属性的属性值特别前面要加#)

②:在页面中需要的位置设置锚点<a name="miao"></a>;(注意:a标签中要写一个name属性,属性值要与①中的href的属性值一样,不加#)标签中按需填写必要的文字,一般不写内容。

锚点链接平滑滚动

一般使用锚点来跳转到页面指定位置的时候,会生硬地立即跳转到指定位置,但是有些时候我们想要平滑地过渡到指定的位置,那么可以使用JQuery简单的实现平滑滚动效果。

只需要在网站的底部代码</body>上面添加以下的代码就可以了。


<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){  
  $('a[href*=#],area[href*=#]').click(function() {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
      var $target = $(this.hash);
      $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
      if ($target.length) {
        var targetOffset = $target.offset().top;
        $('html,body').animate({
          scrollTop: targetOffset
        },
        1000);
        return false;
      }
    }
  });
})
</script>

相关阅读:

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

PHP轮询排序实现逐条循环滚动置顶

jquery实现文字逐条向上无缝滚动(附代码)

发表评论

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

相关教程

  • 提高网站的“回头客”,我们需要给注册会员提供一些特权,而对游客隐藏部分wordpress文章,因为有很多自己做网站论坛vip学员问到,所以这里就提供一段代
  • 请注意,这里说的文章分页,不是学做网站论坛以前说的wordpress分页插件进行网站分类目录分页,而是一篇文章如果文字过多,会造成网页篇幅过长,影响
  • 大家都知道Linux主机实现301重定向相对较简单,如果你使用的是Linux主机,那么在设置固定连接的时候,wordpress后台会自动添加以下函数到.htaccess文
  • DW如何制作HTML锚点链接 视频教程 (1117564 次浏览)
    什么是锚点链接锚点链接(也叫书签链接)常常用于那些内容庞大繁琐的网页,通过点击命名锚点,不仅让我们能指向文档,还能指向页面里的特定段落,更
  • 在前面的Dreamweaver CS6视频教程中,我们介绍了Dreamweaver锚点链接制作方法,锚点链接在实际做网站过程中也会经常用到。但锚点链接有一个缺点,就是
  • 做锚点链接的方法①:设置一个锚点链接<a href="#miao">去找喵星人</a>;(注意:href属性的属性值特别前面要加#)②:在页面中需要
  • 1、导航的固定:.navbar-fixed-top2、导航的锚链接:在链接地址上写上区块的ID名3、导航的平滑滚动:单页面导航插件下载:jquery.singlePageN
  • 很多企业网站的首页都会做一种动态滚动展示企业产品的效果,是企业网站建设常用的方法。既展示了企业的产品,又让整个网站动静结合,不再毫无生气。
  • 我们在学习网站制作过程,发现很多网站都采用tab切换菜单来显示不同栏目的内容,这样即可以节省网站版面,也可以更多的显示网站的栏目内容。如何在自
  • 有些学员在学习制作网站时,想在自己的网站上添加一些左右滚动的切换图效果,这种效果可以实现自动切换和手动左右切换。如果要实现在网站上增加切换图