引入了 jQuery 插件“scrollUp”，它实现了“返回页面顶部”按钮。

正如你们中的一些人可能已经注意到的，rzldn.com返回页面顶部按钮已经介绍了！

事实上，我以前实现过一次，但是我实在觉得没有必要，而且不免觉得这是一个障碍。所以大约一周后我就把它取下来了。我自己仍然不觉得有必要，但我决定一段时间以来第一次引入它，看看是否只有我一个人有这个需求，或者它是否确实是一个需要的功能。

我用了“向上滚动” jQuery插件。它实现起来很简单，可以轻松实现一个时尚的返回顶部按钮，所以我想介绍一下它！

将JS和CSS文件放到服务器上并运行！

我提到的是博客@Cosmosphere文章。第一的官方页面的”下载” 在链接的 github 页面上。拉链从``!下载完整的文件集

当你解压该文件时，它会被分成几个文件夹，但是你需要使用JS和CSS文件。如果服务器上没有安装jQuery，只需将jQuery文件上传到服务器并安装即可。

具体来说，以下 CSS 文件之一和

css/主题/link.css
css/主题/pill.css
css/主题/tab.css

以下 jQuery 文件，

js/jquery.scrollUp.js

只需将其上传到服务器并在 HTML 源代码中指定即可。考虑到加载速度，头部添加了CSS，页脚添加了Javascript。根据安装的文件路径更改“（文件路径）”的位置！

    &lt;link type=text/css rel=stylesheet href=/（ファイルパス）/css/themes/pill.css /&gt;
 
    &lt;script type=text/javascript src=/（ファイルパス）/js/lib/jquery-1.8.3.min.js&gt;&lt;/script&gt;
    &lt;script type=text/javascript src=/（ファイルパス）/js/jquery.scrollUp.min.js&gt;&lt;/script&gt;
 
    &lt;script type=text/javascript&gt;
        // &lt;![CDATA[
        $(function () {
            $.scrollUp();
        });
        // ]]&gt;
    &lt;/script&gt;

顺便说一句，上面的描述是最简单的。您可以通过更改 Javascript 部分来更改行为和外观，如下所示，因此请务必检查一下！

$(function () {
    $.scrollUp({
        scrollName: 'scrollUp', // Element ID
        topDistance: '300', // Distance from top before showing element (px)
        topSpeed: 300, // Speed back to top (ms)
        animation: 'fade', // Fade, slide, none
        animationInSpeed: 200, // Animation in speed (ms)
        animationOutSpeed: 200, // Animation out speed (ms)
        scrollText: 'Scroll to top', // Text for element
        activeOverlay: false, // Set CSS color to display scrollUp active point, e.g '#00FFFF'
    });

});

就我个人而言，我觉得跳跃的动作很可爱，我有点喜欢它，但作为一个想完全消除不必要的描述的人，我仍然怀疑是否有必要添加它。如果我们能够正确分析它们，我们计划继续分析其影响并将其作为文章发表。

抛开我的故事不谈，如果您想在您的网站上实现“返回页面顶部”按钮，这非常简单，所以请尝试一下！

scrollUp jQuery 插件 – Mark Goodyear

将JS和CSS文件放到服务器上并运行！

Related articles