在網頁中，我們經常會由于網頁內容過長，而需要在瀏覽網頁時有一個快速回到網頁頂部的功能，在瀏覽網頁內容離頂部有一段距離時，出現快速回到網頁頂部的工具，從而能使我們的網頁更人性化。

以下分為幾個步驟來實現：

步驟1：引入jquery庫

<script type="text/javascript" src="js/jquery-1.8.0.js"></script>

步驟2：在網頁中引入回到頂部的網頁元素，并且設置元素的樣式

<div id="gotop"></div>設置元素樣式，默認開始隱藏

<style type="text/css">

#gotop{

display:none;

width:55px;

height:55px;

position:fixed;

right:50px;

bottom:50px;

url(p_w_picpaths /backtop2013.png) no-repeat -70px 0px;

}

</style>

步驟3：定義js來控制元素的漸顯、漸隱功能，并且控制網頁滾動條的位置。

<script type="text/javascript">

function goTop({

    $(window).scroll(function(e) {

//若滾動條離頂部大于100元素

if($(window).scrollTop()>100)

             $("#gotop").fadeIn(1000);//以1秒的間隔漸顯id=gotop的元素

else

             $("#gotop").fadeOut(1000);//以1秒的間隔漸隱id=gotop的元素

   });

1};

$(function(){

//點擊回到頂部的元素

    $("#gotop").click(function(e) {

//以1秒的間隔返回頂部

            $('body,html').animate({scrollTop:0},1000);

   });

    $("#gotop").mouseover(function(e) {

        $(this).css("background","url(p_w_picpaths/backtop2013.png) no-repeat 0px 0px");

   });

    $("#gotop").mouseout(function(e) {

        $(this).css("background","url(p_w_picpaths/backtop2013.png) no-repeat -70px 0px");

   });

    goTop();//實現回到頂部元素的漸顯與漸隱

});

</script>

按照上面的3個步驟，將可以實現回到頂部的功能。