最近在開發網站需要制作返回頂部按鈕,但是我主要為后端開發,對前端不太熟練,經過網上資料查詢,制作出了返回頂部的按鈕,下面是兩種簡單的方式,記錄一下.喜歡本網站的朋友可以收藏下,會不定期更新學習資料.
第一種:引用外部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>以上兩種方式僅提供思路,直接使用也可,具體想要的圖標可自己調試，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
