原生js怎么实现1s返回顶部的过渡？
back.addEventListener("click",function(){
document.body.scrollTop="0px";
});
而设置了body的样式 transition:all 1s;不起作用
是不是因为scrollTop不属于元素的样式的属性啊
怎么解决？
冰冰冰冰冰3515066
2016-08-12
3 回答
。 。。window.onload=function(){
var menubar=document.getElementById("menubar");
var more=document.getElementById("more");
var owrap=document.getElementById("owrap");
var top=document.getElementById("backtop");
//侧边栏
more.onclick=function(){
menubar.style.right="0px";
owrap.style.display="block";
}
owrap.onclick=function(){
menubar.style.right="";
owrap.style.display="none";
}
//返回顶部
function backTop(btn){
window.onscroll=set;
function set(){
if ((document.documentElement.scrollTop||document.body.scrollTop)>600) {
btn.style.display=(document.documentElement.scrollTop||document.body.scrollTop)? "block":"none";
}else{
btn.style.display="none";
}
}
btn.onclick=function(){
btn.style.display="none";
window.onscroll=null;
this.timer=setInterval(function(){
if(document.body.scrollTop){
document.body.scrollTop -= Math.ceil(document.body.scrollTop * 0.1);
}else{
document.documentElement.scrollTop -= Math.ceil(document.documentElement.scrollTop * 0.1);
}
if (document.body.scrollTop==0) clearInterval(btn.timer), window.onscroll = set, document.body.scrollTop = 0;
},20);
}
}
backTop(top);
}
做个参考吧。有过渡。
每多少毫秒执行一次就可以实现过渡效果。
举报
0/150
提交
取消
