惠州做网站：最佳免费滚动到顶部JavaScript插件和片段

在网络上的所有免费脚本中，没有什么比滚动到顶部的片段更简单了。

这会在页面底部附近添加一个小箭头，当单击该箭头时，会自动将窗口滚动到页面顶部。这是一个受欢迎的选择，博客文章较长，登陆页面较长。

如果你想要选择具有这些滚动到顶部功能的垃圾，那么你真的很喜欢这个画廊。我亲自从vanilla JS脚本中挑选了一些我最喜欢的jQuery插件，所有这些目标都有相同的目标：只需点击一下，即可让访问者顺利回到页面顶部。惠州做网站

1. ScrollUp

我的列表中首先是ScrollUp，它是一个免费的jQuery插件。它非常简单，只需一行代码即可运行。

你基本上只是定位$ .scrollUp（）函数，让它运行在应该点击的任何元素上。这意味着您通常需要手动将小箭头功能添加到布局中。

但是如果你查看GitHub文档，你会发现一个带有CSS和JS代码的示例片段，用于预先构建的箭头。易于设置，易于定制，并有大量的演示示例可供测试。

2.材质ScrollTop

我从未考虑过使用这种滚动功能的材料设计。但显然其他人已经产生了这个令人敬畏的Material ScrollTop脚本。

当您在主标题下滚动时，会出现一个小的材质箭头图标。我想你可以猜到它的作用。

我最喜欢这个剧本的是它如何真正复制材料风格。

这应该按照Google的材料指南融入任何布局，并且它可以在jQuery上完美运行。

3. jQuery Scroll Top

如果你想挑选一些代码来真正了解它是如何工作的那么你会喜欢Karen Grigoryan的滚动功能。

这不像插件那样运行，但它确实在jQuery之上运行。它也非常容易设置，因为您可以从CodePen仓库中复制/粘贴。

请注意，CSS样式在这个上留下了很多不足之处。虽然如果您将脚本移植到自己的页面中，您可能还需要一个空白的平板来进行自定义。

4.返回顶部箭头

这是CodePen的另一个例子，带有甜蜜的返回顶部箭头动画。

再一次，它运行在jQuery上，再一次，代码评论得很好。我想任何人都可以深入研究这个问题并在制作滚动箭头的过程中挑出几个金块。

加上实际的箭头设计非常好。它可以基本上适用于任何布局，所以我给它一个大拇指美学。

5.平滑滚动

我常常惊讶于只需几次搜索就能在CodePen上找到多少。这个片段可能是我见过的最简单的片段。

您可以删除几乎所有的正文内容，并仍然保持这种工作。箭头图标定位固定，因此它可以在容器内部工作，但它也可以在主页面体中固定工作。

这个jQuery代码不太好阅读，因此在获取之前你需要通过JS了解自己的方式。仍然是一个很棒的工作演示，你可以自己复制。

6. jQuery和Vanilla JS

这是一个提供两全其美的代码片段。

通过此CodePen演示，您将找到在vanilla JavaScript和jQuery中运行的滚动到顶部功能的示例。两个代码都是分开的，但是没有很多注释，因此分开它们并不容易。

如果你不了解很多JavaScript，这可能是一个很难改造到你的网站的片段。

但对于想要在jQuery或普通JS之间进行选择的人来说，它也是一个很好的资源。

7.纯JavaScript Scroll

jQuery库在代码中内置了自己的scrollTo（）函数。但不是每个人都喜欢每个项目的jQuery。

这就是开发人员Erick Tatsui创建这个片段的原因。这是一个完全基于vanilla JavaScript构建的免费滚动功能。

这样，如果您已有脚本文件，则无需从头开始编写整个滚动条。只需将此功能添加到您的网站，定位正确的箭头元素，然后我们离开！

8. Vue BackToTop

Vue.js布局通常使用在Vue库之上运行的组件构建。一个非常酷的例子是这个Vue.js到顶部的滚动脚本。

它作为本机Vue组件工作，不应干扰页面上的任何其他内容。您甚至可以查看实时示例，了解其实际运作方式。

这甚至还带有两个可编辑选项：按钮文本和显示滚动按钮之前所需的总像素。

也许对每个Web开发人员都没用，但如果你在Vue工作，肯定是一个很酷的功能。

9. CodyHouse返回顶部

各种CodyHouse教程永远不会给人留下深刻的印象，而且我不断寻找新的摇滚乐。

这个非常好的滚动箭头示例可让您轻松地将代码复制/粘贴到任何网站中。

事实上，如果你想在下载副本之前检查一下，那么有一个非常清晰的演示页面。此外，主要文章页面还包含一个完整的教程，解释了如何构建它以及如何自己复制它。

这里最大的问题是缺少GitHub或开源支持。您必须下载代码才能完整地查看它们，这不是一个糟糕的苦差事，但考虑到GitHub上的所有开源选项，可能会感到后退。

10. fullPage.js

让我们进一步深入研究fullPage.js的自定义滚动功能。此库不仅自定义滚动或强制用户在页面上跳得更高。

相反，此插件允许您使用自定义滚动位置控制页面的布局。

它基本上是一个单页滚动插件，允许您定义单个页面部分，您可以在内容之间跳转。它有一个漂亮的设计，滚动功能非常容易定制。

但我意识到，对于只想要一个简单的滚动到顶部按钮的人来说，这可能有点过分了。

对于同样构建单页面布局的开发人员来说，这仍然是一个不错的选择。

11. dyScrollUpJS

该dyScrollUpJS是最简单的JS插件，你会发现之一。它仅在几个月前发布，仍然可以在ES6 / JS代码上运行半频繁更新。

如果您密切关注屏幕的右下角，文档页面上实际上有一个小型演示。

该页面包含一个演示，一个示例视频，代码片段和基本文档，以便在您的网站上启动和运行。您还可以在自定义浏览器滚动插件中要求什么？

12.平滑滚动

使用Smooth Scroll插件，我们将回到jQuery环境。这不支持任何vanilla JS选项，并且它不是需要经常更新的东西。

那你为什么要在你的网站上测试Smooth Scroll呢？

因为它是我见过在jQuery上运行的最轻的选项。这基本上在一行代码上运行，并且没有很多自定义选项（好像需要很多）。

您需要知道的一切都在GitHub页面上，包括主要源代码的下载链接。只需抓取一份副本，将其设置在您的网站上，定位您的箭头元素并让它骑行。

它没有比这更顺畅。

13. Simplescrollup

我最近偶然发现了Simplescrollup插件，并立刻爱上了这个设计。

它由纯JavaScript驱动，因此它没有任何依赖性。更不用说你也可以通过npm安装这个插件，这对于在命令行工作的web开发人员来说是一个很棒的工具。

这个想法很简单：一切都是通过箭头元素上的类来控制的。因此，每当用户单击箭头时，它将运行JS函数以将其全部返回到顶部。

从那里，您的箭头按钮将更改类以从视图中自动隐藏。然后，如果用户向下滚动，则根据需要重复。十分简单！

查看代码的GitHub仓库以及有关设置的更多信息。

包起来

在所有这些滚动插件，代码片段和库中，必须有适合您网站的东西。

我意识到并不是所有开发人员都喜欢jQuery，而有些人则发誓。一些开发人员需要轻量级脚本来提高性能，其他开发人员需要大量功能和开箱即用的漂亮设计。

没有选择本质上是对或错。为不同的开发人员提供不同的功能，以便找到最适合您的功能并使其运行。

惠州做网站