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

你想在 WordPress 网站的页面效果顶部添加平滑滚动吗?

当页面很长并且你希望为访客返回顶部提供一种简单的方法时,滚动到顶部效果非常好。 它有助于改善我们网站的访客体验。

在本文中,我将向你展示如何使用 jQuery 和插件为 WordPress 添加平滑滚动效果。

如何使用jQuery滚动顶部效果

什么是平滑滚动,我应该什么时候使用它?

除非你的网站没有固定的标题菜单,否则滚动到长 WordPress 页面或帖子底部的访客将不得不手动滑动或滚动到顶部才能浏览你的网站。

这真的很烦人,访客通常会简单地点击后退按钮并离开。 这就是为什么我们需要一个可以快速将访客带到页面顶部的按钮。

我们可以将此功能添加为简单的文本链接,而无需像这样使用 jQuery:

^顶部

这将在几毫秒内向上滚动整个页面并将访客发送到顶部。 它有效,但它可能很烦人,例如当你在路上撞车时。

平滑滚动则相反。 它以视觉上令人愉悦的效果将访客推回顶部。 使用这些元素可以极大地改善你网站的访客体验。

也就是说,让我们看看如何使用 WordPress 插件jQuery 为顶部效果添加平滑滚动。

如何使用 WordPress 插件添加平滑向上滚动效果

建议初学者使用此方法,因为它允许你在 WordPress 网站上添加滚动到顶部效果,而无需触及任何一行代码。

我们需要做的第一件事是安装并启用 WPFront Scroll Top 插件。 如需帮助,请参阅我们关于如何安装 WordPress 插件的教程。

启用后,我们可以导航到设置»滚动到 WordPress 仪表板的顶部。 在这里我们可以配置插件并自定义平滑滚动效果。

你必须首先单击“启用”复选框以启用站点上的滚动到顶部按钮。 接下来,你将看到编辑滚动偏移、按钮大小、不透明度、淡入淡出持续时间、滚动持续时间等的选项。

编辑 WPfront 滚动顶部设置

向下滚动,你会发现更多选项,例如编辑自动隐藏时间、在小型设备上启用按钮隐藏选项、从 wp-admin 屏幕隐藏等等。

你还可以在单​​击按钮时编辑按钮的功能。 默认情况下,它会滚动到页面顶部,但你也可以将其更改为滚动到帖子中的特定元素或页面链接。

还有一个选项可以更改按钮的位置。 它默认显示在屏幕的右下角,但我们可以选择将其移动到不同的角落。

附加编辑 WPfront 滚动顶部设置

WPFront Scroll Top 插件还提供了一个过滤器,仅在选定页面上显示向上滚动按钮。

它通常出现在你的 WordPress 博客的每一页上。 但是,我们可以转到“在页面上显示”部分并选择你希望滚动到顶部效果的位置。

选择您希望效果出现的位置

该插件还提供预制按钮设计供你选择。 应该很容易找到与你的网站相匹配的设计。

假如你找不到适合你的预制图片按钮,我们可以选择从 WordPress 媒体库上传自定义图片。

选择图像按钮

完成后,只需单击“保存更改”按钮。

你现在可以访问该网站并查看滚动到顶部按钮的运行情况。

滚动到顶部按钮预览

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

不建议初学者使用此方法。 它适合那些熟悉编辑主题的人,因为它包括向你的网站添加代码的能力。

在你的 WordPress 主题中使用 jQuery、一些 CSS 和一行 HTML 代码添加平滑的滚动顶部效果。

首先,打开记事本等文本编辑器并创建一个文件。 继续并将其保存为 smoothscroll.js。

接下来,你需要将此代码复制并粘贴到文件中。

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

然后,我们可以保存文件并将其上传到 WordPress 主题目录中的 /js/ 文件夹。 有关更多信息,请参阅我们的教程,了解如何使用 FTP 将文件上传到 WordPress。

假如你的主题没有 /js/ 目录,我们可以创建一个并上传 smoothscroll.js。 有关更多信息,请参阅我们的 WordPress 文件和目录结构教程。

这段代码是一个 jQuery 脚本,它为将访客带到页面顶部的按钮添加了平滑的滚动效果。

我们需要做的下一件事是将 smoothscroll.js 文件加载到我们的主题中。 为此,我们在 WordPress 中对脚本进行排队。

然后只需将此代码复制并粘贴到主题的functions.php 文件中。 我们不建议直接编辑主题文件,因为一个小错误可能会损坏你的网站。 相反,我们可以使用 WPCode 之类的插件,并按照我们的教程了解 WordPress 中添加自定义片段。

1wp_enqueue_script(’smoothup’,get_template_directory_uri()。’数组(’jquery’),”,真);

在上面的代码中,我们告诉 WordPress 加载脚本并加载 jQuery 库,因为插件依赖于它。

现在我们已经添加了 jQuery 部分,让我们添加到 WordPress 站点的实际链接,该链接将访客带到顶部。 只需将此 HTML 粘贴到主题的 footer.php 文件中的任何位置。 如需帮助,请参阅我们的教程,了解 WordPress 中添加页眉和页脚代码。

你可能已经注意到 HTML 代码包含链接但不包含锚文本。 这是因为它使用带有向上箭头的图像图标来显示向上按钮。

在这个例子中,我们使用了一个 40x40px 的图标。 只需将下面的自定义 CSS 添加到主题的样式表中。

此代码使用图像图标作为按钮的背景图像并将其设置为固定位置。 我还添加了一个小的 CSS 动画,当访客将鼠标悬停在按钮上时它会旋转按钮。

1234567891011121314151617#smoothup {height: 40px;width: 40px;position:fixed;bottom:50px;right:100px;text indent:-9999px;display:none;background:url(” oz-transition:-du 0.4sec; 过渡持续时间: 0.4 秒;} #smoothup:hover {-webkit-transform: rotate(360deg) }background: url(”) no repeat;}

你需要将其替换为你要在上面的 CSS 中使用的图像 URL。 我们可以使用 WordPress 媒体上传器上传你自己的图像图标,复制图像 URL 并将其粘贴到你的代码中。

我希望这篇文章能帮助你使用 jQuery 为你的网站的顶部效果添加平滑滚动。 你可能还想查看我们为小型企业选择的最佳 WordPress 插件的专家选择,以及有关如何开设在线商店的分步教程。

© 版权声明
THE END
喜欢就支持一下吧
点赞15 分享
评论 抢沙发

请登录后发表评论