控制的js代码如下:

Heim  >  Artikel  >  Web-Frontend  >  js控制的回到页面顶端goTop的代码实现_javascript技巧

js控制的回到页面顶端goTop的代码实现_javascript技巧

WBOY
WBOYOriginal
2016-05-16 17:40:031191Durchsuche

有没有见过很多在页面的右下角有个【回到顶端】的悬浮东东,并且在开始时没有,一移动滚动条就出现,回到了顶端又消失的样子。
像:
js控制的回到页面顶端goTop的代码实现_javascript技巧
控制的js代码如下:

复制代码 代码如下:

function goTop(){
var _btn = document.getElementById("goTop");
if (document.documentElement && document.documentElement.scrollTop) {
var _con = document.documentElement;
} else if (document.body) {
var _con = document.body;
}
window.onscroll = set;
_btn.style.left = document.documentElement.scrollWidth/2 + 500 + "px";
_btn.onclick = function (){
_btn.style.display = "none";
window.onscroll = null;
this.timer = setInterval(function() {
_con.scrollTop -= Math.ceil(_con.scrollTop * 0.3);
if (_con.scrollTop == 0) clearInterval(_btn.timer, window.onscroll = set);
},10);
};
function set() {
_btn.style.display = _con.scrollTop ? 'block': "none";
}
};
document.write("



");
window.onscroll = goTop;
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn