<body>
<div id="box">
<h3>返回顶部 </h3>
<div id="btn">button</div>
</div>
<script type="text/javascript">
$(function(){
$(window).scroll(function(){
var scroll = $(window).scrollTop()
console.log(scroll)
if(scroll>500){
$("#btn").css({"display":"block"})
// $('#btn').fadeIn(500)
}else{
$("#btn").css({"display":"none"})
// $('#btn').fadeOut(500)
}
})
$("#btn").click(function(){
$('html,body').animate({scrollTop:0},1000)
})
})
</script>
</body>
//第二种原生js
<body>
<div id="box">返回顶部</div>
<script type="text/javascript">
window.onload=function(){
var obox=document.getElementById("box"),
scroll=0,begin=0;end=0;timer=null;
window.onscroll=function(){
scroll=document.documentElement.scrollTop;
if(scroll>200){
obox.style.display="block";
begin=scroll;
}else{
obox.style.display="none"
}
obox.onclick=function(){
clearInterval(timer);
timer=setInterval(function(){
begin=begin+(end-begin)/8;
window.scrollTo(0,begin);
if(Math.floor(begin)===end){
clearInterval(timer);
}
},20)
}
}
}
</script>
</body>
497
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
