善恶资源网专注优秀技术教程分享网-傅汉松!

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

傅汉松 技术教程

汉松出品|资源介绍

傅汉松本次为大家分享的是如何实现网站锚点链接平滑滚动

傅汉松

做锚点链接的方法

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


标签: 暂无标签

免责声明:

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

同类推荐
评论列表

技术教程 如何实现网站锚点链接平滑滚动
做锚点链接的方法①:设置一个锚点链接<a href="#miao">去找喵星人</a>;(注意:href属...
扫描二维码阅读原文
QQ娱乐网 January, 01
生成社交图 ×
    84.32ms