最近在開發網站需要製作返回頂部按鈕,但是我主要為後端開發,對前端不太熟練,經過網上資料查詢,製作出了返回頂部的按鈕,下面是兩種簡單的方式,記錄一下.喜歡本網站的朋友可以收藏下,會不定期更新學習資料.
第一種:引用外部jQuery新建HTML頁面,將下面代碼複製保存,通過瀏覽器打開,即可看到效果.
<!doctype html><html lang=en><head><meta charset=UTF-8><title>doc</title><style> .arrow{ border: 9px solid transparent; border-bottom-color: #3DA0DB; width: 0px; height: 0px; top:0px } .stick{ width: 8px; height: 14px; border-radius: 1px; background-color: #3DA0DB; top:15px; } #back_top div{ position: absolute; margin: auto; right: 0px; left: 0px; } #back_top{ background-color: #dddddd; height: 38px; width: 38px; border-radius: 3px; display: block; cursor: pointer; position: fixed; right: 50px; bottom: 100px; display: none; }</style></head><body><div id=article></div><div id=back_top><div class=arrow></div><div class=stick></div></div><script src=http://cdn.staticfile.org/jquery/1.11.1-rc2/jquery.min.js></script><script>$(function(){ for(var i =0 ;i <100;i++){ $(#article).append(<p>xxxxxxxxxx<br></p>) }})</script><script>$(function(){ $(window).scroll(function(){ //只要窗口滾動,就觸發下面代碼var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //獲取滾動後的高度if( scrollt >200 ){ //判斷滾動後高度超過200px,就顯示$(#back_top).fadeIn(400); //淡入}else{ $(#back_top).stop().fadeOut(400); //如果返回或者沒有超過,就淡出.必須加上stop()停止之前動畫,否則會出現閃動} }); $(#back_top).click(function(){ //當點擊標籤的時候,使用animate在200毫秒的時間內,滾到頂部$(html,body).animate({scrollTop:0px},200); }); });</script></body></html>第二種:使用css及特殊圖標進行設置全代碼打造簡潔美觀回到頂部按鈕,同上,將代碼複製進HTML文件中,打開即可看到效果.
<!doctype html><html lang=en><head><meta charset=UTF-8><title>doc</title><style> #back_top{ 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; } #back_top span{ display:block; width:60px; color:#dddddd; font-size:40px; text-align:center; margin-top:4px; } #back_top span:hover{ color:#cccccc; } </style></head><body><div id=article></div><a id=back_top href=script:;> <span>⌆</span> </a></div><script>$(function(){ for(var i =0 ;i <100;i++){ $(#article).append(<p>xxxxxxxxxx<br></p>) }})</script><script>$(function(){ $(window).scroll(function(){ //只要窗口滾動,就觸發下面代碼var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //獲取滾動後的高度if( scrollt >200 ){ //判斷滾動後高度超過200px,就顯示$(#back_top).fadeIn(400); //淡出}else{ $(#back_top).stop().fadeOut(400); //如果返回或者沒有超過,就淡入.必須加上stop()停止之前動畫,否則會出現閃動} }); $(#back_top).click(function(){ //當點擊標籤的時候,使用animate在200毫秒的時間內,滾到頂部$(html,body).animate({scrollTop:0px},200); });});</script></body></html>以上兩種方式僅提供思路,直接使用也可,具體想要的圖標可自己調試，希望對大家的學習有所幫助，也希望大家多多支持武林網。