老鱼网一个爱分享的小站!分享一些站长相关知识资源文章!
云服务器推荐

首页好文推荐建站教程正文

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

老鱼网1个月前32

做锚点链接的方法

①:设置一个锚点链接<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>


上一篇:网站二级、三级联动选择制作方法(附JS Select联动代码 )

下一篇:css @import 语法和写法详解


转载声明:本站提供的资源,都来自网络,版权争议与本站无关,所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。 侵删请致信E-mail:wwwlaoyuwang#126.com(#=@)