這篇文章我們來講一下在網站建設中，HTMl頁面中返回頂部的幾種實現小結。本文對大家進行網站開發設計工作或者學習都有一定幫助，下面讓我們進入正文。

最近在開發網站需要制作返回頂部按鈕,但是我主要為后端開發,對前端不太熟練,經過網上資料查詢,制作出了返回頂部的按鈕,下面是兩種簡單的方式,記錄一下.喜歡本網站的朋友可以收藏下,會不定期更新學習資料.

第一種:引用外部jQuery

新建HTML頁面,將下面代碼復制保存,通過瀏覽器打開,即可看到效果.

doc

.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;

}

$(function(){

for(var i =0 ;i <100;i++){

$("#article").append("

xxxxxxxxxx

")

}

})

$(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);

});

});

第二種:使用css及特殊圖標進行設置

全代碼打造簡潔美觀回到頂部按鈕,同上,將代碼復制進HTML文件中,打開即可看到效果.

doc

#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;

}

?

總結

以上是生活随笔為你收集整理的html页面刷新回到顶部_HTMl页面中返回顶部的几种实现小结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。