回到頂部過渡js代碼（回到頂部html代碼）

本文目錄一覽：

1、點擊網頁底部的top按鈕直接回到網頁頂部,怎麼做?用js怎麼表達
2、怎麼寫「返回頂部」的代碼？
3、JS或者jquery怎麼設置滾動條回到頂部
4、如何通過HTML標記或JS代碼實現跳轉返回頁面頂部
5、JS或者jquery怎麼設置滾動條回到頂部？

點擊網頁底部的top按鈕直接回到網頁頂部,怎麼做?用js怎麼表達

看你是否需要到頂部的動畫效果，如果不需要動畫效果而是直接回到網頁頂部，那麼根本不需要去使用JS。

如：在頁面的最頂端設置錨點 a name=”top”/a

然後在回到頂部的top按鈕加連接 a href=”#top”top/a 就可以了

當然JS也能實現，主要是給scrolltop賦值為0，從而回到頁面頂部。

怎麼寫「返回頂部」的代碼？

你應該說明一下需要編寫的網頁語言，這樣也好寫一下。

HTML的代碼：

使用HTML的錨標記最簡單了，但是唯一的缺點就是樣式不怎麼樣，會顯示這個錨標記。

a name=”top” id=”top”/a

放置位置在body標籤之後隨便找個地方放都可以，只要靠近頂部即可。

頁面底部放置：

a href=”#top” target=”_self”返回頂部/a

使用Javascript Scroll函數返回頂部

scrooll函數用來控制滾動條的位置，有兩種很簡單的實現方式：

方式1：

a href=”javascript:scroll(0,0)”返回頂部/a

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

方式2：

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

function pageScroll() {

window.scrollBy(0,-10);

scrolldelay = setTimeout(‘pageScroll()’,100);

}

a href=”pageScroll();”返回頂部/a

這樣就會動態返回頂部，不過雖然返回到頂部但是代碼仍在運行，還需要在pageScroll函數加一句給停止掉。

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

三、使用Onload加上scroll功能實現動態返回頂部

首先在網頁BODY標籤結束之前加上：

div id=”gotop”返回頂部/div

2、再調用以下JS腳本部分：

BackTop=function(btnId){

var btn=document.getElementById(btnId);

var d=document.documentElement;

window.onscroll=set;

btn.onclick=function (){

btn.style.display=”none”;

window.onscroll=null;

this.timer=setInterval(function(){

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

if(d.scrollTop==0) clearInterval(btn.timer,window.onscroll=set);

},10);

};

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

};

BackTop(‘gotop’);

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

SCRIPT src=”/js/gotop.js” type=text/javascript/SCRIPT

來調用，當然了位置最好放在「返回頂部」標籤的下面，該調用方法已假設路徑為JS，其它位置請自行修改。

返回頂部代碼都是文字式樣的，也可以把文字更換為漂亮一點的圖標，另外還有懸浮狀的返回頂部代碼（就是頁面滾動時，返回頂部圖標也會跟著跑的那種），需要使用到層等。

JS或者jquery怎麼設置滾動條回到頂部

JS或者jquery設置滾動條回到頂部的方法：

返回頂部：設置為body的scrollTop為0

滑動效果：animate（Jquery的自定義動畫）

備註：returnTop為觸發返回頂部的元素ID。

JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言，內置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的腳本語言，最早是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能。

jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之後又一個優秀的JavaScript代碼庫（或JavaScript框架）。jQuery設計的宗旨是「write Less，Do More」，即倡導寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操作、事件處理、動畫設計和Ajax交互。

jQuery的核心特性可以總結為：具有獨特的鏈式語法和短小清晰的多功能介面；具有高效靈活的css選擇器，並且可對CSS選擇器進行擴展；擁有便捷的插件擴展機制和豐富的插件。jQuery兼容各種主流瀏覽器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

如何通過HTML標記或JS代碼實現跳轉返回頁面頂部

可以通過html的錨標籤來實現

html

head/head

body

a id=”top”/a

…………………….

!–在返回頂部按鈕處寫–

a href=”#top”返回頂部/a

/body

/html

js的寫法

頁面上的返回頂部按鈕

button type=”button” onclick=”GoTop()”/button

js中的寫法

function GoTop(){

if (document.body document.body.scrollTop document.body.scrollLeft)

{

document.body.scrollTop=0;

}

if (document.documentElement document.documentElement.scrollTop document.documentElement.scrollLeft)

{

document.documentElement.scrollTop=0;

}

JS或者jquery怎麼設置滾動條回到頂部？