原生js怎么實(shí)現(xiàn)1s返回頂部的過渡？
back.addEventListener("click",function(){
???? document.body.scrollTop="0px";
???? });
而設(shè)置了body的樣式? transition:all 1s;不起作用
是不是因?yàn)閟crollTop不屬于元素的樣式的屬性啊
怎么解決？
冰冰冰冰冰3515066
2016-08-12
3 回答
舉報(bào)
0/150
提交
取消
2016-08-22
2016-08-22
window.onload=function(){
var menubar=document.getElementById("menubar");
var more=document.getElementById("more");
var owrap=document.getElementById("owrap");
var top=document.getElementById("backtop");
//側(cè)邊欄
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);
}
做個(gè)參考吧。有過渡。
每多少毫秒執(zhí)行一次就可以實(shí)現(xiàn)過渡效果。
2016-08-16
transition:all 1s ?我也頭一回看到老師用。原生js實(shí)現(xiàn)1s返回頂部，可以用定時(shí)器setTimeout來做 （自己寫一個(gè)函數(shù)來調(diào)節(jié)scrollTop的值就可以實(shí)現(xiàn)，過度效果就取決于你寫的函數(shù)）