html页面刷新回到顶部_HTML5 回到顶部

作者：AllinToyou | 2024-02-18 20:45:12

踩

html回到顶部按钮刷新后不隐藏

图片：

html

回到顶部

css

margin: 0;

padding: 0;

}

.box {

width:1000px;

margin: 0 auto;

}

#btn {

width:40px;

height: 40px;

position:fixed;

left:50%;

bottom:30px;

background:url(../img/顶部.png) no-repeat left top ;

margin-left: 610px;

}

#btn:hover {

background:url(../img/顶部.png) no-repeat left -40px;

}

indow.onload = function () {

var topbtn = document.getElementById("btn");

var timer = null;

//获取屏幕的高度

var pagelookheight = document.documentElement.clientHeight;

window.onscroll = function(){

//滚动超出高度，显示按钮，否则隐藏

var backtop = document.body.scrollTop;

// 滚动超过一频应该显示

if(backtop >= pagelookheight){

topbtn.style.display = "block";

}

// 不显示

else{

topbtn.style.display = "none";

}

topbtn.onclick = function () {

timer = setInterval(function () {

var backtop = document.body.scrollTop;

//速度操作减速

var speedtop = backtop/5;

document.body.scrollTop = backtop -speedtop; //高度不断减少

if(backtop ==0){ //滑动到顶端

clearInterval(timer); //清除计时器

}

}, 30);

}

效果：

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/110453