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

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

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

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

Scroll to Top example

当页面或帖子具有大量内容时,用户被迫向下滚动以阅读这些内容。当用户向下滚动时,所有导航链接都会上升。当用户阅读完该文章时,他们需要向上滚动以查看您网站上还有其他内容。滚动到顶部按钮可快速将用户发送到页面顶部。您可以在不使用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("http://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以及何时使用它?

Scroll to Top example

当页面或帖子具有大量内容时,用户被迫向下滚动以阅读这些内容。当用户向下滚动时,所有导航链接都会上升。当用户阅读完该文章时,他们需要向上滚动以查看您网站上还有其他内容。滚动到顶部按钮可快速将用户发送到页面顶部。您可以在不使用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("http://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手风琴文章或延迟加载图像文章。

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

本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。如果侵犯你的利益,请发送邮箱到 [email protected],我们会很快的为您处理。
超哥软件库 » 如何使用jQuery在WordPress中添加平滑滚动到顶部效果