課程
/前端開發
/HTML/CSS
/回到頂部效果
在一屏之下刷新頁面,瀏覽器記錄之前的位置 ?按道理這時候按鈕是顯示的 ?但是你設置display默認為none ?這時候沒有scroll事件,所以按鈕會不顯示,這不是個問題嗎?
2017-03-18
源自:回到頂部效果 4-2
正在回答
感覺是的,這視頻分享不錯,但是有一些小bug,這也算是個問題吧,我覺得可以在window.onload 之后,可以先判斷(scrollHeight >= clientHeight),就可以解決這問題了
window.onload = function(){
????????var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
????????var obtn=document.getElementById("btn");
????????scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;
????????if(scrollHeight >= clientHeight){
????????????????obtn.style.display = "block";
????????}? ?else{
????????????????obtn.style.display = "none";? ??
????????}
????????
沒有看到你說的bug,
var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
var obtn=document.getElementById("btn");
var timer=null;
var scrollHeight;
window.onscroll=function(){
scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;
if(scrollHeight >= clientHeight){
obtn.style.display = "block";
}
else{
obtn.style.display = "none";
obtn.onclick=function(){
timer=setInterval(function(){
//var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;
var speed = Math.ceil(scrollHeight / 6);
document.documentElement.scrollTop = document.body.scrollTop =scrollHeight - speed;
//console.log(scrollHeight - speed);
if(scrollHeight == 0){
clearInterval(timer);
},30);
舉報
回到頂部網站不可缺少的一部分,用JS實現炫酷拉風的回到頂部效果
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2018-09-14
感覺是的,這視頻分享不錯,但是有一些小bug,這也算是個問題吧,我覺得可以在window.onload 之后,可以先判斷(scrollHeight >= clientHeight),就可以解決這問題了
window.onload = function(){
????????var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
????????var obtn=document.getElementById("btn");
????????scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;
????????if(scrollHeight >= clientHeight){
????????????????obtn.style.display = "block";
????????}? ?else{
????????????????obtn.style.display = "none";? ??
????????}
????????
2017-03-24
沒有看到你說的bug,
window.onload = function(){
var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
var obtn=document.getElementById("btn");
var timer=null;
var scrollHeight;
window.onscroll=function(){
scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;
if(scrollHeight >= clientHeight){
obtn.style.display = "block";
}
else{
obtn.style.display = "none";
}
}
obtn.onclick=function(){
timer=setInterval(function(){
//var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;
var speed = Math.ceil(scrollHeight / 6);
document.documentElement.scrollTop = document.body.scrollTop =scrollHeight - speed;
//console.log(scrollHeight - speed);
if(scrollHeight == 0){
clearInterval(timer);
}
},30);
}
}