scrollTop

介绍

原生 JavaScript 实现的回到顶部库，适应 PC 和移动，兼容到 IE7+。

效果演示：https://mqyqingfeng.github.io/ScrollToTop/

兼容性

移动和 PC ，其中 PC 端支持 IE7+

依赖

原生 JavaScript 实现，无依赖。

下载

git clone git@github.com:mqyqingfeng/ScrollToTop.git

使用

<script src="path/ScrollToTop.js"></script>

或者

import ScrollToTop from 'path/ScrollToTop.js'

示例

<span id="toTop" class="toTop"></span>

#toTop {
    position: fixed; right: 20px; bottom: 20px; margin-bottom: 20px; cursor: pointer; width: 0; height: 0; border-top: 30px solid transparent; border-bottom: 60px solid #3498db; border-left: 30px solid transparent; border-right: 30px solid transparent; 
}

var toTop = new ScrollToTop("#top");

你也可以传入参数：

var toTop = new ScrollToTop("#top", {
    // 滚动条向下滑动多少时，出现回到顶部按钮
    showWhen: 100,
    // 回到顶部的速度。
    speed: 100,
    // 元素淡入和淡出的速度
    fadeSpeed: 10
});

注意：当要兼容 IE7 的时候，不能传入选择符字符串，直接传入元素：

var topElement = document.getElementById("toTop");
var toTop = new ScrollToTop(topElement)

API

初始化

var toTop = new ScrollToTop("selector", options);

options

1.showWhen

默认值为 100，表示滚动条向下滑动 100px 时，出现回到顶部按钮

2.speed

回到顶部的速度。默认值为 100，数值越大，速度越快。

100 表示浏览器每次重绘，scrollTop 就减去 100px。

3.fadeSpeed

元素淡入和淡出的速度。默认值为 10，数值越大，速度越快。

10 表示浏览器每次重绘，元素透明度以 10% 递增或者递减。

backing

当回到顶部时，按钮元素会添加一个名为 backing 的类，当按钮元素隐藏时，该类会被删除。

可以使用此类名实现正在回到顶部时的效果。