使用ScrollUp添加返回顶部功能

下载ScrollUp https://github.com/markgoodyear/scrollup

在网页中引用jquery.scrollUp.jsjquery.easing.jsjquery.min.js三个JavaScript脚本,注意顺序

<script src="jquery.min.js"></script>
<script src="jquery.easing.js"></script>
<script src="jquery.scrollUp.js"></script>

然后加入控制代码

<script>
$(function () {
    $.scrollUp();
});
</script>

以上是最简单的使用方法,还有一种带参数的方法

$(function () {
    $.scrollUp({
        scrollName: 'scrollUp',      // Element ID
        scrollDistance: 300,         // Distance from top/bottom before showing element (px)
        scrollFrom: 'top',           // 'top' or 'bottom'
        scrollSpeed: 300,            // Speed back to top (ms)
        easingType: 'linear',        // Scroll to top easing (see http://easings.net/)
        animation: 'fade',           // Fade, slide, none
        animationSpeed: 200,         // Animation speed (ms)
        scrollTrigger: false,        // Set a custom triggering element. Can be an HTML string or jQuery object
        scrollTarget: false,         // Set a custom target element for scrolling to. Can be element or number
        scrollText: 'Scroll to top', // Text for element, can contain HTML
        scrollTitle: false,          // Set a custom <a> title if required.
        scrollImg: false,            // Set true to use image
        activeOverlay: false,        // Set CSS color to display scrollUp active point, e.g '#00FFFF'
        zIndex: 2147483647           // Z-Index for the overlay
    });
});

其中easingType运动类型,可参考http://easings.net/说明选用。