<style>
body{box-sizing:border-box;margin:0; padding:0}
.active_o{width:40px; height:40px; padding:20px; font:14px/20px "微软雅黑"; text-align:center;
background:blue; position:fixed;right:20px;bottom:20px;cursor:pointer; color:#fff;border-radius:50%;opacity: 1}
.active{opacity: 0}
</style>
window.onload = function(){
var oTop = document.getElementById("top");
window.onscroll = function(){
var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
if(scrolltop > 200){
oTop.className='active_o';
}else if(scrolltop <= 200){
oTop.className='active';
}
};
oTop.onclick = function(){
document.documentElement.scrollTop = document.body.scrollTop =0;
//当点击元素时,让页面的滚动距离为0.写两个是为了兼容。
}
}
<body style="height:5000px;">
<h1>主题内容</h1>
<div id="top" class="active">返回顶部</div>
</body>
获取高度啊,用JQuery实现,里面有这样的方法。
不想用jq写。。。
直接用window.scrollTo(0,0);//第一个参数横坐标,第二参数纵坐标
还没有学。。。这个