锚点平滑滚动

这个css样式,一定要加,此乃重点

html, body{scroll-behavior: smooth;}

配合jquery的animate完美实现,代码如下

jQuery('a[href*=#]').click(function() {
   if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
      var jQuerytarget = jQuery(this.hash);
      jQuerytarget = jQuerytarget.length && jQuerytarget || jQuery('["id=' + this.hash.slice(1) + '"]');
      if (jQuerytarget.length) {
         var targetOffset = jQuerytarget.offset().top;
         jQuery('html,body').animate({
               scrollTop: targetOffset
            },1000);
      }
   }
});

Mine吧 » 锚点平滑滚动

发表评论