如何使用jQuery在WordPress中添加平滑滚动到顶部效果

您是否看到过添加平滑滚动到页面顶部效果的网站？如果您有一个长页面，这很棒，并且您希望为用户提供一种简单的方法来回到顶端。最近，我们的一位读者向我们询问了如何在WordPress中添加平滑滚动到最佳效果。在本文中，我们将向您展示如何使用jQuery在WordPress中添加平滑滚动到顶部效果。

注意：本教程是为DIY中级用户创建的，他们可以轻松编辑主题。如果您想使用插件方法，请使用平滑页面滚动到顶部插件。对于那些想要在没有插件的情况下学习如何做到这一点的人，请继续阅读。

什么是Smooth Scroll以及何时使用它？

当页面或帖子具有大量内容时，用户被迫向下滚动以阅读这些内容。当用户向下滚动时，所有导航链接都会上升。当用户阅读完该文章时，他们需要向上滚动以查看您网站上还有其他内容。滚动到顶部按钮可快速将用户发送到页面顶部。您可以在不使用jQuery的情况下将其添加为文本链接，如下所示：

  <a href="#" title="Back to top">^Top</a>  

它只是将用户发送到页面顶部并在几毫秒内向上滚动整个页面。它很实用，但有点像路上的颠簸。平滑滚动与此相反。它可以平滑地将用户滑回到页面顶部。这可以创建一个很好的效果并改善用户体验。

使用WordPress中的jQuery将平滑滚动添加到顶部效果

要为平滑效果添加平滑滚动，我们将在您的WordPress主题中使用jQuery，一些CSS和一行HTML代码。首先打开像记事本这样的文本编辑器。创建一个文件并将其另存为smoothscroll.js。将此代码复制并粘贴到文件中：

  jQuery(document).ready(function($){  $(window).scroll(function(){          if ($(this).scrollTop() < 200) {  $("#smoothup") .fadeOut();          } else {  $("#smoothup") .fadeIn();          }      });  $("#smoothup").on("click", function(){  $("html, body").animate({scrollTop:0}, "fast");  return false;  });  });  

保存文件并将其上传到您的WordPress主题目录/ JS /文件夹（请参阅如何使用FTP将文件上载到WordPress）。如果你的主题没有/ JS /目录，然后创建一个并上传smoothscroll.js它。此代码是jQuery脚本，它将向用户添加到页面顶部的按钮添加平滑滚动效果。

接下来你需要做的是添加smoothscroll.js你的主题。为了做到这一点，我们将在WordPress中排队脚本（在我们的指南中了解如何在WordPress中正确添加脚本）。将此代码复制并粘贴到您的主题中的functions.php文件。Wénjiàn.

  wp_enqueue_script( "smoothup", get_template_directory_uri() . "/js/smoothscroll.js", array( "jquery" ), "",  true );  

在上面的代码中，我们告诉WordPress加载我们的脚本并加载jQuery库，因为我们的插件依赖于它。现在我们已经添加了jQuery部分，让我们添加一个实际的链接到我们的WordPress网站，让用户回到顶部。将此HTML粘贴到主题中的任何位置footer.php文件。Wénjiàn.

  <a href="#top"  title="Back to top"></a>  

您注意到我们已添加链接但未将其链接到任何文本。那是因为我们将使用带有向上箭头的图像图标来显示一个回到顶部的按钮。在此示例中，我们使用的是40x40px图标。将其添加到主题的样式表中。

  #smoothup {  height: 40px;  width: 40px;  position:fixed;  bottom:50px;  right:100px;  text-indent:-9999px;  display:none;  background: url("https://www.example.com/wp-content/uploads/2013/07/top_icon.png");  -webkit-transition-duration: 0.4s;  -moz-transition-duration: 0.4s; transition-duration: 0.4s;  }    #smoothup:hover {  -webkit-transform: rotate(360deg) }  background: url("") no-repeat;  }  

在上面的CSS中，我们使用固定位置作为图像图标，并使用图像图标作为背景图像。您可以使用WordPress媒体上传器上传图片图标，然后获取图片网址将其粘贴为背景网址。我们还在按钮上添加了一个小动画，当用户将鼠标悬停在按钮上时，它会旋转按钮。

滚动到顶部效果允许用户返回到顶部并在您的网站上查找其他要做的事情。您可以做的另一件事是添加一个像我们在我们网站上的浮动页脚栏来显示精选内容。如果您不希望用户滚动到顶部以分享您的文章，那么我们强烈建议您使用浮动社交共享栏插件，就像我们在WPBeginner上一样。

我们希望本文能够帮助您使用jQuery在网站上添加平滑的滚动效果。要在WordPress中查看jQuery的其他一些很酷的用法，您可以查看我们的jQuery FAQ手风琴文章或延迟加载图像文章。

你认为滚动到最佳效果是否有用？请在下面发表评论告诉我们。

您是否看到过添加平滑滚动到页面顶部效果的网站？如果您有一个长页面，这很棒，并且您希望为用户提供一种简单的方法来回到顶端。最近，我们的一位读者向我们询问了如何在WordPress中添加平滑滚动到最佳效果。在本文中，我们将向您展示如何使用jQuery在WordPress中添加平滑滚动到顶部效果。

注意：本教程是为DIY中级用户创建的，他们可以轻松编辑主题。如果您想使用插件方法，请使用平滑页面滚动到顶部插件。对于那些想要在没有插件的情况下学习如何做到这一点的人，请继续阅读。

什么是Smooth Scroll以及何时使用它？

当页面或帖子具有大量内容时，用户被迫向下滚动以阅读这些内容。当用户向下滚动时，所有导航链接都会上升。当用户阅读完该文章时，他们需要向上滚动以查看您网站上还有其他内容。滚动到顶部按钮可快速将用户发送到页面顶部。您可以在不使用jQuery的情况下将其添加为文本链接，如下所示：

  <a href="#" title="Back to top">^Top</a>  

它只是将用户发送到页面顶部并在几毫秒内向上滚动整个页面。它很实用，但有点像路上的颠簸。平滑滚动与此相反。它可以平滑地将用户滑回到页面顶部。这可以创建一个很好的效果并改善用户体验。

使用WordPress中的jQuery将平滑滚动添加到顶部效果

要为平滑效果添加平滑滚动，我们将在您的WordPress主题中使用jQuery，一些CSS和一行HTML代码。首先打开像记事本这样的文本编辑器。创建一个文件并将其另存为smoothscroll.js。将此代码复制并粘贴到文件中：

  jQuery(document).ready(function($){  $(window).scroll(function(){          if ($(this).scrollTop() < 200) {  $("#smoothup") .fadeOut();          } else {  $("#smoothup") .fadeIn();          }      });  $("#smoothup").on("click", function(){  $("html, body").animate({scrollTop:0}, "fast");  return false;  });  });  

保存文件并将其上传到您的WordPress主题目录/ JS /文件夹（请参阅如何使用FTP将文件上载到WordPress）。如果你的主题没有/ JS /目录，然后创建一个并上传smoothscroll.js它。此代码是jQuery脚本，它将向用户添加到页面顶部的按钮添加平滑滚动效果。

接下来你需要做的是添加smoothscroll.js你的主题。为了做到这一点，我们将在WordPress中排队脚本（在我们的指南中了解如何在WordPress中正确添加脚本）。将此代码复制并粘贴到您的主题中的functions.php文件。Wénjiàn.

  wp_enqueue_script( "smoothup", get_template_directory_uri() . "/js/smoothscroll.js", array( "jquery" ), "",  true );  

在上面的代码中，我们告诉WordPress加载我们的脚本并加载jQuery库，因为我们的插件依赖于它。现在我们已经添加了jQuery部分，让我们添加一个实际的链接到我们的WordPress网站，让用户回到顶部。将此HTML粘贴到主题中的任何位置footer.php文件。Wénjiàn.

  <a href="#top"  title="Back to top"></a>  

您注意到我们已添加链接但未将其链接到任何文本。那是因为我们将使用带有向上箭头的图像图标来显示一个回到顶部的按钮。在此示例中，我们使用的是40x40px图标。将其添加到主题的样式表中。

  #smoothup {  height: 40px;  width: 40px;  position:fixed;  bottom:50px;  right:100px;  text-indent:-9999px;  display:none;  background: url("https://www.example.com/wp-content/uploads/2013/07/top_icon.png");  -webkit-transition-duration: 0.4s;  -moz-transition-duration: 0.4s; transition-duration: 0.4s;  }    #smoothup:hover {  -webkit-transform: rotate(360deg) }  background: url("") no-repeat;  }  

在上面的CSS中，我们使用固定位置作为图像图标，并使用图像图标作为背景图像。您可以使用WordPress媒体上传器上传图片图标，然后获取图片网址将其粘贴为背景网址。我们还在按钮上添加了一个小动画，当用户将鼠标悬停在按钮上时，它会旋转按钮。

滚动到顶部效果允许用户返回到顶部并在您的网站上查找其他要做的事情。您可以做的另一件事是添加一个像我们在我们网站上的浮动页脚栏来显示精选内容。如果您不希望用户滚动到顶部以分享您的文章，那么我们强烈建议您使用浮动社交共享栏插件，就像我们在WPBeginner上一样。

我们希望本文能够帮助您使用jQuery在网站上添加平滑的滚动效果。要在WordPress中查看jQuery的其他一些很酷的用法，您可以查看我们的jQuery FAQ手风琴文章或延迟加载图像文章。

你认为滚动到最佳效果是否有用？请在下面发表评论告诉我们。