开发人员指南使用 JQuery 在 WordPress 中添加平滑滚动到顶部效果
已发表: 2022-06-03我们都喜欢 WordPress，因为它的无缝性以及在使用高效的内容管理系统时让事情变得更容易的事实。
毫不夸张地说，简单易用的 Web 开发对于新站长来说是一件幸事。 WordPress 具有数十种功能，允许各种网站所有者为他们的用户提供超级流畅和交互式的界面。
那些不熟悉 WordPress 的人可以查看有关博客启动器等资源的 WordPress 教程，其中包含有关如何启动博客和管理博客的分步指南。
如果您只关注网站上的内容，我们想告诉您，响应式和视觉上吸引人的网站与内容一样重要。
如果您有一个现有的网站并且您不知道从哪里开始，请花点时间每天花 30 分钟来考虑您网站的外观和界面。 相信我们，因为您会逐渐找到需要修复的元素。 一旦您通过出色的视觉效果来增强您的网站，对话率就会增加。
如果您已经投入了为用户提供流畅的网站访问体验的工作，那么向您致敬！ 好吧，我们为每个想要进一步为其网站提供前卫改变并改善其网站的整体视觉性能的人准备了一个很棒的教程。
在这篇博文中，让我们指导您在 jQuery 的帮助下在 WordPress 中添加平滑滚动到顶部效果。
为什么要使用平滑滚动？
通常，当网站有很长的文章并且用户正在浏览它们时，他们可能会发现到达网页末尾会令人沮丧。
因此，如果您的网站只需单击一下即可平滑滚动到顶部，那么读者会发现您的网站无缝且超级流畅。
因此，如果您是网站所有者或数字营销人员，您需要成为机会主义者，并确保您尽一切努力为您的网站吸引更多的有机受众。
在 WordPress 中添加平滑滚动到顶部效果的方法
为了能够在 WordPress 中将平滑滚动添加到效果，您可以使用以下任何一种方法：
1.使用一些用jQuery编写的代码
2.使用插件
我们通常更喜欢编码而不是插件，因为如果以正确的方式完成，就没有打嗝的余地。 插件有时会降低网站的加载速度，但编码可以帮助您添加一些自定义，而不会影响速度。 特别是，在本教程中，我们将解释编码过程。
如何通过编码在 WordPress 中添加平滑滚动到顶部效果？
为了使用编码在您的 WordPress 网站上添加平滑滚动到顶部效果，您需要执行以下四个步骤：
- 创建一个“Smoothscrolleffect.js”文件。
- 将“Smoothscrolleffect.js”功能附加到您的主题。
- 在主题中添加图标
- 将效果与网页链接
完成这 4 个步骤后，您就可以吸引更多读者了。 如果您是程序员，那么您可以根据自己的要求创建自己的脚本。
对于非程序员，我们已经彻底解释了每个步骤并添加了所需的代码。 因此，您只需阅读这些步骤并相应地执行它们。
第 1 步：创建一个“Smoothscrolleffect.js”文件
这是您将为此步骤创建的最重要的文件。 如果您未能有效地执行此步骤，那么您可能无法完全实现平滑滚动。
在这一步中，我们将创建一个“.js”（jQuery）文件，其中包含一个可以为顶部效果添加平滑滚动的函数。 按照步骤创建“.js”文件并将其上传到网站目录。
- 在您的系统中创建一个新的记事本文件。
- 复制以下代码：
jQuery(文档).ready(函数($){
$(窗口).scroll(函数(){
if ($(this).scrollTop() < 200) {
$('#smoothup') .fadeOut();
} 别的 {
$('#smoothup') .fadeIn();
}
});
$('#smoothup').on('点击', function(){
$('html, body').animate({scrollTop:0}, 'fast');
返回假；
});
});
- 将代码粘贴到记事本文件中。
- 使用任何名称保存它，但确保扩展名为“.js”。
- 登录到您网站的 cPanel。
- 导航到网站的目录“/js/”
注意：如果您的网站没有 js 目录，那么您必须创建一个。
- 在目录中上传您在系统上创建的“.js”文件。
第 2 步：将平滑滚动附加到主题
在上面的步骤中，我们在网站的目录中创建了一个文件（带有平滑滚动功能），在这一步中，我们将平滑滚动功能链接到我们的主题。 为此，请按照下列步骤操作：
在 WordPress 管理仪表板中导航到您的主题编辑器。 打开 function.php 进行编辑。 并在其中粘贴以下代码。
wp_enqueue_script('smoothup', get_template_directory_uri() . '/js/smoothscroll.js', array('jquery'), ”, true);
点击“保存更改”。
步骤 3. 将图标添加到主题
显然，您想向您的网站添加一个图标，通过它您可以让读者滚动到顶部。 除此之外，您需要使其更具交互性和响应性。 您可以在 CSS 的帮助下完成，如下所示：
- 在主题编辑器中导航到您的主题的 stylesheet.css。
- 复制以下代码。
#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(”) 不重复；
}
- 将其粘贴到主题的样式表中。
- 点击“保存更改”。
在这里您可以根据需要更改图标； 我们使用了一个参考。 为了更改图像，您可以将其上传到您的网站，然后将其粘贴到上述代码中的 Background: URL 字段中。
第4步：将平滑滚动与网页链接。
现在我们已经创建了一个“.js”文件，并将其上传到网站目录，附加主题，并为效果创建一个图标，是时候进行最后一步了。 我们现在将平滑滚动效果链接到网站的所有网页。 按照步骤：
- 在主题编辑器中打开 footer.php。
- 复制以下代码：
- <a href=”#top” id=”smoothup” title=”返回顶部”></a>
- 将其粘贴到 footer.php 页面中。
- 点击“保存更改”。
恭喜！您已成功使用 jQuery 将平滑滚动顶部效果添加到您的 WordPress 网站。
结论
我们希望上述教程能有效地帮助您使用 JQuery 在 WordPress 中添加“平滑滚动到顶部”效果，并以出色的网站导航体验吸引您的用户。
如果您碰巧在执行上述步骤时遇到任何问题，请在下方发表评论让我们知道。
