Question to say "I can!"

全代碼打造簡潔美觀回到頂部按鈕

2012-09-02

參考于:水煮魚——全代碼打造簡潔美觀回到頂部按鈕

這次,給大家帶來一個比較實用的 jQuery 技巧,為你的網站添加一個純代碼畫出來的、簡潔美觀的回到頂部按鈕。這個按鈕的效果就是,當頁面滑動一段距離之后,就會浮現出來這個按鈕,點擊這個按鈕之后,就自動滾動到頂部。

點擊之后就會跳轉到頂部,然后這個按鈕平滑消失。與網上的相比,潛行者m版的是純代碼,加載速度更快,效果色彩控制好;代碼精簡,只有數條而已,拒絕大坨大坨的代碼。廢話不多說,下面就開始制作。

HTML 結構

我使用了 a 標簽作為這個結構,可能不太標準,但是比較方便。在 a 標簽中,內置了一個 span 標簽,用來顯示三角號。具體代碼如下:

<a id="gotop" href="#"> <span>▲</span> </a>

對,你沒看錯,就這么簡單的一句代碼,直接在 a 標簽中,填寫一個三角號。剩下的就是使用 CSS 進行樣式控制。

CSS 代碼

#gotop{ display:block; width:60px; height:60px; position:fixed; bottom:50px; right:40px; border-radius:10px 10px 10px 10px; text-decoration:none; display:none; background-color:#999999; }

上面這段代碼,定義了 a 標簽的外觀樣式,定義 display 為 block,這樣,我們才能指定它的 width 和 height。定義 position 為fixed,讓它固定在右下角。同時為它指定圓角,就是使用 border-radius 屬性,定于半徑為10px的圓角。

#gotop span{ display:block; width:60px; color:#dddddd; } #gotop span:hover{ color:#cccccc; } #gotop span{ font-size:40px; text-align:center; margin-top:4px; }

上面這一段,就是定義了 span 標簽里面的三角號,至于如何打出這個“三角號”,使用搜狗輸入法,按下“Ctrl + Shift + z”,就會彈出搜狗的特殊字符,就可以找到了。這幾句代碼意思很簡單,就是定義了三角號的外觀樣式,同時制定了顏色變化,這是為了用戶體驗。最下面的 margin-top:4px,則是用來準確定位三角號,讓它居中顯示。

jQuery 代碼

具體的 jQuery 代碼如下,解析已經寫在注釋里面了:

$(function(){ $(window).scroll(function(){ //只要窗口滾動,就觸發下面代碼 var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //獲取滾動后的高度 if( scrollt >200 ){ //判斷滾動后高度超過200px,就顯示 $("#gotop").fadeIn(400); //淡出 }else{ $("#gotop").stop().fadeOut(400); //如果返回或者沒有超過,就淡入.必須加上stop()停止之前動畫,否則會出現閃動 } }); $("#gotop").click(function(){ //當點擊標簽的時候,使用animate在200毫秒的時間內,滾到頂部 $("html,body").animate({scrollTop:"0px"},200); }); });

怎么樣,簡單吧?就用這幾句代碼而已,就可以出現這個功能,而且可以方便的修改顏色、形狀、大小等。當然缺點也是有的,就是在IE6等過時的瀏覽器中,可能不會兼容,無法實現。

作者:admin | Categories:設計問題 | Tags:

發表評論

電子郵件地址不會被公開。 必填項已用*標注

*

澳洲f1赛车b盘开奖套路 上海11选5开奖结果彩控 炒股如何开户手机 山西快乐十分必出规律 内蒙古十一选五最新开奖 新疆11选5开奖号 股票行情在线分析 青海快三有没有平台有 许昌股票配资 白小姐精选一码 吉林11选5中奖规则及奖金 排列5缩水 app 东方6 1走势图综合版 10bet在线娱乐城百家乐 快乐双彩走势图wx15 com 好易配资 全国22选5走势图表