html怎么做一个回到顶部,web前端入门到实战：HTML DOM 事件（实现一个简单的回到顶部功能）...

HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。事件通常与函数结合使用，函数不会在事件发生前被执行！ (如用户点击按钮)。

利用onscroll事件写一个回到顶部功能，代码如下：

Document

*{margin: 0;padding: 0;}

#mybtn{position: fixed;height: 40px;width: 100px;background: red;border: none;border-radius: 5px;right: 20px;bottom: 20px;cursor: pointer;display: none;}

#mybtn:hover{background-color: #888888;color: #FFFFFF;}

返回顶部

向下滑动

实现返回顶部功能

//浏览器窗口执行

window.onscroll = function(){

changeScroll();

}

//改变滚动距离

function changeScroll(){

if(document.body.scrollTop >20 || document.documentElement.scrollTop >20){

document.getElementById("mybtn").style.display = "block";

}else{

document.getElementById("mybtn").style.display = "none";

}

}

function topfunction(){

var timer = setInterval(function(){

document.body.scrollTop -= 20;

document.documentElement.scrollTop -=20;

if(document.body.scrollTop ==0 && document.documentElement.scrollTop ==0){

clearInterval(timer);

}

},30)

}

web前端开发学习Q-q-u-n： 784-783-012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法

(详细的前端项目实战教学视频，PDF)

效果如下：