html 点击回到顶部,JavaScript-点击回到顶部

主要依托于滚轮监听实现。scroll值需要正确的理解

代码实现如下：

回到顶部

*{

margin:0;

padding:0;

}

body{

height:3000px;

}

#box{

position:fixed;

top:0;

display:none;

width:100%;

background-color:black;

height:60px;

}

#top{

position:fixed;

right:30px;

bottom:30px;

baclground-color:blue;

width:30px;

height:30px;

}

window.onscroll = function(){

if(window.scrollY >= 300){

box.style.display = 'block';

}else{

box.style.display = 'none';

}

}

var top = document.getElementById('top');

top.onclick = function(){

window.scrollTo(0,200);

}