原生js给页面添加一键滚动到顶部按钮
版权声明：
本文为博主原创文章，转载请声明原文链接...谢谢。o_0。
更新时间：
2019-05-04 13:50:01
温馨提示：
学无止境,技术类文章有它的时效性,请留意文章更新时间,如发现内容有误请留言指出,防止别人"踩坑",我会及时更新文章
查看效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>标题</title>
<meta name="keywords" content="关键字" />
<meta name="description" content="描述" />
<style type="text/css">
#toTop {
width: 50px;
height: 50px;
background: rgba(0, 0, 0, 0.3);
position: fixed;
-moz-background-size: 50px 50px;
background-size: 50px 50px;
bottom: 75px;
-moz-border-radius: 50%;
border-radius: 50%;
z-index: 999999;
right: 50px;
_position: absolute;
_bottom: auto;
_top: expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-75-(parseInt(this.currentStyle.marginTop, 10)||0)-(parseInt(this.currentStyle.marginBottom, 10)||0)));
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
#toTop.hide {
display: none
}
#toTop:after {
content: '';
width: 15px;
height: 15px;
display: block;
border: solid 2px #fff;
border-right: none;
border-bottom: none;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
margin-top: 5px
}
</style>
</head>
<body>
<div style="height: 300px;">
正文
</div>
<div style="height: 300px;">
正文
</div>
<div style="height: 300px;">
正文
</div>
<div style="height: 300px;">
正文
</div>
<div style="height: 300px;">
正文
</div>
<div style="height: 300px;">
正文
</div>
<div style="height: 300px;">
正文
</div>
<div style="height: 300px;">
正文
</div>
<div style="height: 300px;">
正文
</div>
<script type="text/javascript">
(function(factory) {
if (typeof define === 'function' && define.amd) {
define(function() {
return factory();
})
} else {
factory().init();
}
})(function() {
var di = document.createElement('a');
di.id = 'toTop';
di.title = '返回顶部';
di.href = 'javascript:;';
di.className = 'hide';
document.getElementsByTagName('body')[0].appendChild(di);
window.onscroll = function() {
var top = document.documentElement.scrollTop || document.body.scrollTop;
var toTop = document.getElementById("toTop");
if (top > 100) {
toTop.className = "";
} else {
toTop.className = "hide";
}
};
var toTop = new function() {
var Timer = null;
function $id(id) {
return typeof id == "string" ? document.getElementById(id) : id;
};
this.Init = function(objName) {
$id(objName).onclick = function() {
var top = document.documentElement.scrollTop || document.body.scrollTop;
startNove();
return false;
};
var startNove = function() {
if (Timer) clearInterval(Timer);
Timer = setInterval(doMove, 30);
};
var doMove = function() {
var iSpeed = 0;
var top = document.documentElement.scrollTop || document.body.scrollTop;
iSpeed = (0 - top) / 5;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if (Math.abs(iSpeed) < 1 && Math.abs(0 - top) < 1) {
clearInterval(Timer);
Timer = null;
}
window.scrollTo(0, (top + iSpeed));
};
};
};
return {
init: function() {
toTop.Init("toTop");
}
}
});
</script>
</body>
</html>
