js | phper `blog

js返回顶部的通用方法

By admin 2014年5月9日 Javascript No Comments

2394

js返回顶部的通用方法

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function backTop(btnId) {
var btn = document.getElementById(btnId);
var d = document.documentElement;
var b = document.body;
window.onscroll = set;
btn.style.display = "none";
btn.onclick = function() {
btn.style.display = "none";
window.onscroll = null;
this.timer = setInterval(function() {
d.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1);
b.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1);
if ((d.scrollTop + b.scrollTop) == 0) clearInterval(btn.timer, window.onscroll = set);
},
10);
};
function set() {
btn.style.display = (d.scrollTop + b.scrollTop > 100) ? 'block': "none"
}
};

</script>
</head>
<body>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

<a href="#" id='goTop' onclick="backTop('goTop');">顶部</a>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

function backTop(btnId) {

var btn = document.getElementById(btnId);

var d = document.documentElement;

var b = document.body;

window.onscroll = set;

btn.style.display = "none";

btn.onclick = function() {

btn.style.display = "none";

window.onscroll = null;

this.timer = setInterval(function() {

d.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1);

b.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1);

if ((d.scrollTop + b.scrollTop) == 0) clearInterval(btn.timer, window.onscroll = set);

10);

};

function set() {

btn.style.display = (d.scrollTop + b.scrollTop > 100) ? 'block': "none"

}

};

</script>

</head>

<body>

<br>

</body>

</html>

phper `blog

一个phper技术分享博客，发表自己最新的开发心得，关注最新的IT技术

JS获取浏览器类型

js返回顶部的通用方法