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

2020-12-23
WordPress行业动态

您是否看到过向页面顶部效果添加平滑滚动的网站？当页面较长时，这非常好，并且您希望为用户提供一种简便的方法来回到顶部。最近，我们的一位读者问我们有关在WordPress中添加平滑滚动以达到最佳效果的问题。在本文中，我们将向您展示如何使用jQuery在WordPress中添加平滑滚动以达到最佳效果。

注意：本教程是为那些喜欢编辑主题的DIY中级用户创建的。如果要使用插件方法，请使用平滑的页面滚动到顶部插件。对于那些想学习如何在没有插件的情况下进行操作的人，请继续阅读。

什么是“平滑滚动”以及何时使用？

当页面或帖子中包含很多内容时，用户将被迫向下滚动以阅读那些内容。当用户向下滚动时，您的所有导航链接都会上升。当用户阅读完该文章后，他们需要向上滚动才能查看您网站上的其他操作。滚动到顶部按钮可将用户迅速带到页面顶部。您可以将其添加为文本链接，而无需使用jQuery，如下所示：

<ahref="#"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'); returnfalse; });});

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

接下来，您需要将添加smoothscroll.js到主题。为了做到这一点，我们将使脚本排入WordPress（有关如何在WordPress中正确添加脚本的指南，以了解更多信息）。将此代码复制并粘贴到主题functions.php文件中。

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

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

<ahref="#top"id="smoothup"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;}