JS实现回到Top(顶部)--JavaScript

Posted 2020-10-05 Thanlon

当我们浏览一段很长的网页时，已经看到底部了，想回到顶部看前面的内容，可是需要滚动好几转鼠标滑轮或者拉动滚动条走好长“一段路”。这对于用户来说，体验效果是不够好的。如果我们借助简单的一个按钮，点击一下就能回到顶部，这会让用户省很多事，用户体验效果就非常好了。

注意编写程序代码时要解决如下问题：

1、这个按钮如何布局

2、JS如何解决点击按钮回到Top,且回到Top的用户体验最好

3、按钮在怎样的情况下显示

如果你没有思路,不用担心,看完代码实现后,你就明白了

1、案例主要的代码

 demo.html:

<a href="javascript:" style="display: none" class="btn" id="btn" title="回到顶端">

<img src="images/GoTopColor.png"/>

</a>

comm.css:

*{margin: 0;padding: 0;}
div img{width: 100%;/*display: block*/}
.btn{
width: 50px;
height: 60px;
position: fixed;
bottom: 30px;
right: 5px;
}
.btn img{width: 100%;height: 100%;}
.btn:hover{
background-color: black;
}

comm.js:

/**

* Created by NIUXINLONG on 2017/9/3.
*/
window.onload = function () {
var topbtn = document.getElementById("btn");
var timer = null;
var screenHeight = document.documentElement.clientHeight;
window.onscroll = function () {
var backtop = document.body.scrollTop;
if(backtop >=screenHeight){
topbtn.style.display = "block";
}
else {
topbtn.style.display = "none";
}
};
topbtn.onclick = function () {
timer = setInterval(function () {
var backtop = document.body.scrollTop;
var speed = backtop/5;
document.body.scrollTop = backtop-speed;
if(backtop == 0){
clearInterval(timer);
}
},60);
}
};

2、案例效果图

 

案例源文件：GoTOP.zip

本文系作者原创，转载请注明出处，感谢合作！