$(function(){
  $(&＃39;a[href^="#"]&＃39;).click(function(){
    var speed = 500;
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? &＃39;html&＃39; : href);
    var position = target.offset().top;
    $("html, body").animate({scrollTop:position}, speed, "swing");
    return false;
  });
});

上述代码可以实现平滑滚动，你可以通过改变“speed”来更改滚动速度，另外，通过最后返回“false”，我们尽量不影响URL。

由于WordPress与“$”冲突，我们将“$”更改为“jQuery”，下面我们使用jQuery的动画标签来实现平滑滚动。

我们来看具体的示例

代码如下

HTML代码

  
    
    
    
    
    
  
  
    
目录
    

      
sample1
      
sample2
      
sample3
      
sample4
    
    

      
sample1
      Topへ
    
    

      
sample2
      Topへ
    
    

      
sample3
      Topへ
      
    

      
sample4
      Topへ
    
  

CSS代码

div{
 height: 1000px;
}

运行结果如下：只截图了上面的部分，下面还有sample1、sample2、sample3、sample4。

以上就是如何使用jQuery实现页面的平滑滚动的详细内容，更多请关注 第一PHP社区 其它相关文章！