亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

回到頂部效果

難度初級
時長40分
學習人數
綜合評分9.63
249人評價 查看評價
9.9 內容實用
9.6 簡潔易懂
9.4 邏輯清晰
關于圖片不顯示,老師給#btn加個了display:none;表示不顯示在文檔當中,去掉就會出現了
我們公司用jQuery寫的 2句話搞定了。js的參考下也不錯
廣東人說普通話都一樣。。。。。
講的蠻好,不過我得練練
停止滾動條的時候大家都是習慣性的向下滾動,然而我停止的時候也是發現向下滾動并不好使,突然發現向上滾動可以停止事件。。。這讓我有點蛋疼
ctrl+滾輪 然后再測試吧
居中用margin:auto
body{
text-align: center;
}
居中
講得很詳細
我第一次用Firefox預覽 結果Firefox沒效果 還以為我打錯還是什么的 搞得我重看了4,5遍視屏 結果我一直沒發現到底哪錯了。。。。。。搞得我凌亂的想死?。。。。?! 然后莫名的換chrome試了一下 居然正常了 沒錯!?。。。∷尤徽A耍。。。?!我就想問問老師 你沒弄兼容嗎?????我就一菜鳥 玩我有意思嗎???!?。?/div>
我百度了一下 document.documentElement.scrollTop和document.body.scrollTop始終有一個為0,所以可以用這兩個的和來求scrollTop 所以document.documentElement.scrollTop = document.body.scrollTop 是設置scrolltop = 0 。。。。。。。。。我在火狐上是了好久都是直接回到頂部!??!

已采納回答 / ChirsX3405375
固定定位fixed是相對于瀏覽器窗口固定,因為這個top圖標當滑動滾動條時,永遠是在頁面右下方,所以用fixed比較合適。

最贊回答 / 小菜鳥飛
點擊回到頂部時,滾動條滾動,定時器中有istop=true這句話執行,因為開始滾動了,所以同時觸發onscroll,而if(!istop)為false,不會停止定時器,如果在回到頂部的過程中,用戶自己滾動,沒有經過定時器,flag為false,!flag為true,執行停止定時器語句。
呃 寫的有問題 改一下:@尤克里里Ukulelelelelel 的方法不錯 返回頂部過程中和滾動條拼速度體驗不好 最好是直接點擊頁面就停下來。示例
1.在頁面添加一個空div css類似 #scrollStop{position: fixed;top: 0;left: 0;bottom:0;right:0;}
2.給返回頂部按鈕添加一個z-index=1(確保按鈕不被空div給蓋住了)
3.js的onscroll中獲取#scrollStop并添加點擊事件scrollStop.onclick{clearsetInterval(timer)};
尤克里里的方法不錯 返回頂部過程中和滾動條拼速度體驗不好 最好是直接點擊頁面就停下來  示例
1.在頁面添加一個空div css類似 #scrollStop{width: 100vw;height: 100vh;background-color: #transparent;position: fixed;top: 0;left: 0;}
2.給返回頂部按鈕添加一個z-index=1(確保按鈕不被div給蓋住了)
3.js的onscroll中獲取#scrollStop并添加點擊事件scrollStop.onclick{clearsetInterval(timer)};
課程須知
1.掌握HTML+CSS基礎知識;2.了解JavaScript中onclick事件、簡單dom操作、定時器等知識。
老師告訴你能學到什么?
1.掌握兩種實現頂部效果的方法; 2.學會定時器、window.onscroll等知識

微信掃碼,參與3人拼團

微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

友情提示:

您好,此課程屬于遷移課程,您已購買該課程,無需重復購買,感謝您對慕課網的支持!

本次提問將花費2個積分

你的積分不足,無法發表

為什么扣積分?

本次提問將花費2個積分

繼續發表請點擊 "確定"

為什么扣積分?

舉報

0/150
提交
取消