<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>JS 回到顶部</title>
<link rel="stylesheet" href="base.css" />
<style>
#toTop {
width: 30px;
height: 40px;
padding: 20px;
text-align: center;
background: #06c;
position: absolute;
cursor: pointer;
color: #fff;
}
</style>
<script>
window.onload = function() {
var oTop = document.getElementById("toTop");
var screenw = document.documentElement.clientWidth || document.body.clientWidth;
var screenh = document.documentElement.clientHeight || document.body.clientHeight;
oTop.style.left = screenw - oTop.offsetWidth + "px";
oTop.style.top = screenh - oTop.offsetHeight + "px";
window.onscroll = function() {
var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
oTop.style.top = screenh - oTop.offsetHeight + scrolltop + "px";
}
oTop.onclick = function() {
document.documentElement.scrollTop = document.body.scrollTop = 0;
}
}
</script>
</head>
<body style="height:3000px;">
<h3 style=" text-align: center; padding-top: 40px;">阅谁问君诵,水落清香浮</h3>
<div id="toTop">返回顶部</div>
</body>
</html>
PSp:兼容IE6+,火狐,谷歌,欧朋的内核浏览器
效果图: