原生js怎么实现1s返回顶部的过渡？
back.addEventListener("click",function(){
document.body.scrollTop="0px";
});
而设置了body的样式 transition:all 1s;不起作用
是不是因为scrollTop不属于元素的样式的属性啊
怎么解决？
个回答
-
- Chigga
- 2016-08-22 17:07:37
。 。。 -
- Chigga
- 2016-08-22 17:05:31
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);
}
做个参考吧。有过渡。
每多少毫秒执行一次就可以实现过渡效果。
-
- 哈里至尊
- 2016-08-16 09:44:57
transition:all 1s 我也头一回看到老师用。原生js实现1s返回顶部，可以用定时器setTimeout来做 （自己写一个函数来调节scrollTop的值就可以实现，过度效果就取决于你写的函数）