2022 年最佳免费 WordPress 平滑滚动插件

已发表: 2021-11-09

2019 年最佳免费 WordPress 平滑滚动插件

如果您创建了一个网站，但网站内容太长，在这种情况下难以理解，您可以使用 WordPress Smooth Scroll Plugins。

WordPress 平滑滚动插件将帮助您非常顺畅地上下滚动网站。它不仅会改善您的网站用户体验，还会对转化率产生重大影响。因为您的用户将在您的网站上使用更长的时间。

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

你想知道为什么其他各种网站都有平滑滚动到页面顶部的效果吗？如果页面较长，则非常适合添加平滑滚动顶部效果。

这有助于改善用户在页面上的体验，同时让他们更容易快速回到顶部。

现在的问题是，如何在 WordPress 网站的顶部效果中添加平滑滚动？好吧，您可以使用 jQuery 轻松完成。在这里，我们将讨论如何使用 jQuery 轻松完成它。继续阅读：

什么是平滑滚动，何时使用？

如果页面或帖子有很多内容，用户需要向下滚动才能阅读所有内容。随着用户开始向下滚动，您的导航链接开始上升。

当用户完成阅读时，他们必须滚动查看是否有任何东西留给他/她。滚动到顶部按钮可以让读者快速进行操作。您可以选择添加此文本链接，而无需使用 jQuery。

 <a href="#" title="返回顶部">^顶部</a>

它将在几分之一秒内向上滚动时将读者发送到页面顶部。它作为一个功能性的。

然而，平滑滚动则与此相反。平滑的滚动帮助用户滑回页面的顶部区域。这有助于改善您网站上的用户体验。

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

如果你想为顶部添加平滑滚动效果，那么你可以使用 jQuery。同时，您需要添加一些 CSS 以及一行用于 WordPress 主题的 HTML 代码。

首先，您需要打开一个文本编辑器，例如记事本。现在您需要创建一个文件并将其保存为 smoothscroll.js。现在您需要将代码复制粘贴到文件区域：

jQuery(文档).ready(函数($){
$(窗口).scroll(函数(){
if ($(this).scrollTop() < 200) {
$('#smoothup') .fadeOut();
} 
别的 {
$('#smoothup') .fadeIn();
}
});
   $('#smoothup').on('点击', function(){
$('html, body').animate({scrollTop:0}, 'fast');
返回假；
});
});

现在您需要保存文件。之后，您可以将其上传到 WordPress 主题目录的 /js / 文件夹。如果您的主题没有 /js/ 目录，那么您必须从创建一个开始。

之后，您可以将 smoothscroll.js 上传到该目录。这段代码被称为 jQuery 脚本，它将为按钮添加平滑的滚动效果。它基本上是为了帮助用户顺利到达页面顶部。

之后，您需要将此 smoothscroll.js 添加到您的主题区域。如果你想这样做，你需要在 WordPress 中添加一个脚本。这是您需要粘贴到主题的 functions.php 文件的脚本或代码：

wp_enqueue_script('smooth up', get_template_directory_uri() . '/js/smoothscroll.js', array('jquery'), ”, true);
此代码向 WordPress 发送脚本命令。同时，它还告诉 WordPress 加载 jQuery 库，因为插件依赖于它。

当您添加完 jQuery 部分后，现在您需要添加到 word press 站点的实际链接，这会将用户带回顶部区域。您需要将 HTML 代码粘贴到主题的 footer.php 文件中的任何位置：

 <a href="#top" title="返回顶部"></a>

此步骤包括添加到文件的链接，但它没有与任何文本链接。之所以如此，是因为您需要使用向上箭头的图像图标，这将使您能够显示返回顶部按钮。
以下是如何将 40x40px 图标添加到主题样式表的方法：

#smoothup { 
高度：40px； 
宽度：40px； 
位置：固定；
底部：50px；
右：100px；
文本缩进：-9999px；
显示：无；
背景：url（“http://www.example.com/wp-content/uploads/2013/07/top_icon.png”）； 
-webkit-transition-duration：0.4s； 
-moz 过渡持续时间：0.4 秒； 过渡持续时间：0.4s； 
}
 
#smoothup:悬停{
-webkit 转换：旋转（360 度）}
背景：url('') 不重复；
}

在上述 CSS 中，您选择了为图像图标的位置添加糖霜。它还包括使用图像图标作为背景图像。现在您需要在 WordPress 媒体上传器的帮助下上传您的图像图标。

然后，您可以获得必须粘贴为背景 URL 的图像 URL。由于您已将 CSS 动画添加到不断旋转按钮的按钮，因此用户将鼠标指针保持在按钮上。

现在您需要滚动到顶部效果，这将允许用户返回顶部区域并在您的网站上找到他们可以做的其他事情。

您还可以添加一个浮动页脚，以使功能内容易于显示。如果您不希望您的用户滚动到顶部区域来分享文章，您可以使用浮动社交分享栏插件使其更易于管理。