當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

如何通过HTML标记或JS代码实现跳转返回页面顶部

發(fā)布時(shí)間：2025/6/15 HTML 37 豆豆

生活随笔收集整理的這篇文章主要介紹了如何通过HTML标记或JS代码实现跳转返回页面顶部小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

本文介紹三款簡(jiǎn)單的返回頁面頂部代碼，可以使用簡(jiǎn)單的HTML錨標(biāo)記，也可使用JavaScript?Scroll函數(shù)動(dòng)態(tài)返回，其它的還有懸浮腳本等有點(diǎn)復(fù)雜了，本文不再介紹，大家根據(jù)自己需要選擇其中的一種即可，總之簡(jiǎn)約最美的，能減少代碼就減少代碼，能不調(diào)用的就別調(diào)用，要不是天緣博客的文章都是牛長(zhǎng)也不會(huì)添加這個(gè)功能。

一、使用錨標(biāo)記返回頁面頂部

使用HTML錨標(biāo)記最簡(jiǎn)單，就是看起來有點(diǎn)不好看，點(diǎn)擊后會(huì)在地址欄顯示這個(gè)錨標(biāo)記，其它的倒沒什么。

頁面頂部放置：

放置位置在<body>標(biāo)簽之后隨便找個(gè)地方放都可以，只要靠近頂部即可。

頁面底部放置：

二、使用Javascript Scroll函數(shù)返回頂部

scrooll函數(shù)用來控制滾動(dòng)條的位置，有兩種很簡(jiǎn)單的實(shí)現(xiàn)方式：

方式1：

view plaincopy to clipboard

<a?href="javascript:scroll(0,0)"?mce_href="javascript:scroll(0,0)">返回頂部</a>??

[javascript]?view plaincopy

<a?href="javascript:scroll(0,0)"?mce_href="javascript:scroll(0,0)">返回頂部</a>??

scroll第一個(gè)參數(shù)是水平位置，第二個(gè)參數(shù)是垂直位置，比如要想定位在垂直50像素處，改成scroll(0,50)就可以了。

方式2：

本方式是漸進(jìn)式返回頂部，要好看一些，代碼如下：

view plaincopy to clipboard

function?pageScroll()?{??

window.scrollBy(0,-10);??

scrolldelay?=?setTimeout('pageScroll()',100);??

}??

<a?href="pageScroll();"?mce_href="pageScroll();">返回頂部</a>??

[javascript]?view plaincopy

function?pageScroll()?{window.scrollBy(0,-10);scrolldelay?=?setTimeout('pageScroll()',100);}<a?href="pageScroll();"?mce_href="pageScroll();">返回頂部</a>??

這樣就會(huì)動(dòng)態(tài)返回頂部，不過雖然返回到頂部但是代碼仍在運(yùn)行，還需要在pageScroll函數(shù)加一句給停止掉。

view plaincopy to clipboard

if(document.documentElement.scrollTop==0)?clearTimeout(scrolldelay);??

[javascript]?view plaincopy

if(document.documentElement.scrollTop==0)?clearTimeout(scrolldelay);??

三、使用Onload加上scroll功能實(shí)現(xiàn)動(dòng)態(tài)返回頂部

1、首先在網(wǎng)頁BODY標(biāo)簽結(jié)束之前加上：

2、再調(diào)用以下JS腳本部分（本腳本非天緣原創(chuàng)，早前來源于Z-BLOG官方論壇上收集，源包未帶作者鏈接，如果原作者看到敬請(qǐng)留言添加）：

view plaincopy to clipboard

BackTop=function(btnId){??

????var?btn=document.getElementById(btnId);??

????var?d=document.documentElement;??

???

????window.οnscrοll=set;??

???

????btn.οnclick=function?(){??

???

????????btn.style.display="none";??

????????window.οnscrοll=null;??

???

????????this.timer=setInterval(function(){??

???

????????????d.scrollTop-=Math.ceil(d.scrollTop*0.1);??

???

????????????if(d.scrollTop==0)?clearInterval(btn.timer,window.οnscrοll=set);??

???

????????},10);??

???

????};??

???

????function?set(){btn.style.display=d.scrollTop?'block':"none"}??

???

};??

???

BackTop('gotop');??

[c-sharp]?view plaincopy

BackTop=function(btnId){????var?btn=document.getElementById(btnId);????var?d=document.documentElement;?????window.οnscrοll=set;?????btn.οnclick=function?(){?????????btn.style.display="none";????????window.οnscrοll=null;?????????this.timer=setInterval(function(){?????????????d.scrollTop-=Math.ceil(d.scrollTop*0.1);?????????????if(d.scrollTop==0)?clearInterval(btn.timer,window.οnscrοll=set);?????????},10);?????};?????function?set(){btn.style.display=d.scrollTop?'block':"none"}?};?BackTop('gotop');??

對(duì)Z-BLOG而言，可以放到$(document).ready(function(){....函數(shù)中，也可以獨(dú)立存成一個(gè)js文件，比如gotop.js，再通過：

來調(diào)用，當(dāng)然了位置最好放在“返回頂部”標(biāo)簽的下面，該調(diào)用方法已假設(shè)路徑為JS，其它位置請(qǐng)自行修改。

補(bǔ)充：

上述返回頂部代碼都是文字式樣的，也可以把文字更換為漂亮一點(diǎn)的圖標(biāo)，另外還有懸浮狀的返回頂部代碼（就是頁面滾動(dòng)時(shí)，返回頂部圖標(biāo)也會(huì)跟著跑的那種），需要使用到層等，搞的有點(diǎn)復(fù)雜了，本文暫不列出。

使用超鏈接訪問JavaScript方法：

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標(biāo)題文檔</title>
<style type="text/css">

</style>
<script type="text/javascript">
??? function showWindow(){
????? alert("超鏈接彈出窗口！");
?}
</script>
</head>

總結(jié)

以上是生活随笔為你收集整理的如何通过HTML标记或JS代码实现跳转返回页面顶部的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： HTML学习笔记之二（回到顶部与回到
下一篇： html a name属性