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

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

回到頂部效果

難度初級
時長40分
學習人數
綜合評分9.63
249人評價 查看評價
9.9 內容實用
9.6 簡潔易懂
9.4 邏輯清晰
簡單,易懂,明了
文件無法下載,老師
老師能用jq代替js進行講解,就更好了、
不過也挺厲害的
jQuery 簡單點
$(function(){
$(window).scroll(function(){
var t = $(window).scrollTop();
if(t>200){ $(".top").stop().fadeIn()}else{$(".top").stop().fadeOut();}
})$(".top").click(function(){$("body,html").stop().animate({scrollTop:0},1000); })
})
記得要清空clearInterval, 如果點擊兩次返回頂部按鈕, 這時會創建兩個函數并執行他們,就有兩個interval, timer是全局變量, 所以timer的值是后一個interval ID,第一個interval是清除不了的, 已經被覆蓋, 所以第一個interval會永遠執行下去, 可以分別創建timer,就是把timer變成局部變量,放在onclick事件里. 但是這個時候timer就不是全局變量, Onscroll事件就會出錯. 這里的最好的方式是每次進入單擊事件,清空上一個timer,只執行這次interval, 防止其他的interval造成干擾
這里 window.onscroll事件的目的,就是在使用鼠標上的滾動按鈕滾動頁面時停止interval, 這里用的方法是添加一個isTop,然后在你鼠標滾動的時候,就觸發window.onscroll,執行里面的函數, 由于頁面是一點點的滾動,函數會被執行多次, 這個時候就不會執行interval, 要把這里onscrll函數體執行完后才執行setinterval,但是在執行onscorll第二次的時候, !flage=true,清除interval,這個時候就不在向上滾動了
這里可以直接設置right:20px; bottom:40px 就直接定位到右下角了, 不用設置margin-left,現在的網頁回到頂部都是用iconmoon來做的, 不需要圖片, 減少對服務器的請求,數據小.
雙擊出現BUG的話,在每次執行前先clearInterval(timer);
我火狐瀏覽器,標簽的.onclick事件,沒反應
原來不兼容火狐和ie,,,,
一樣的代碼出不來效果,,,-=50都沒起到作用,滾動條在刷新后滑動一次點擊突然彈回頂部就再也滑不下來了
用戶還以為,這個網站瘋了~~
課程須知
1.掌握HTML+CSS基礎知識;2.了解JavaScript中onclick事件、簡單dom操作、定時器等知識。
老師告訴你能學到什么?
1.掌握兩種實現頂部效果的方法; 2.學會定時器、window.onscroll等知識

微信掃碼,參與3人拼團

微信客服

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

幫助反饋 APP下載

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

公眾號

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

友情提示:

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

本次提問將花費2個積分

你的積分不足,無法發表

為什么扣積分?

本次提問將花費2個積分

繼續發表請點擊 "確定"

為什么扣積分?

舉報

0/150
提交
取消