首頁 > 其他

JS返回頁面頂部實現程式碼

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

方法一，純css實現方法

頁面頂部放置：

 代碼如下 複製代碼

<a name="top" id="top"></a>

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

頁面底部放置：

 代碼如下 複製代碼

<a href="#top" target="_self">返回頂部</a>

方法二,js帶css實現方法

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

 代碼如下 複製代碼

function pageScroll() {
window.scrollBy(0,-10);
scrolldelay = setTimeout('pageScroll()',100);
}

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

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

 代碼如下 複製代碼

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

方法三,jquery實現方法

首先需要在頂部添加如下html元素：

 代碼如下 複製代碼

<p id="back-to-top"><a href="#top"><span></span>返回頂部</a></p>

其中a標籤指向錨點top，可以在頂部防止一個<a name="top"></a>的錨點，這樣在瀏覽器不支援js時也可以實現返回頂部的效果了。

要想讓返回頂部的圖片顯示在右側，還需要一些css樣式，如下：

 代碼如下 複製代碼
/*returnTop*/
p#back-to-top{
    position:fixed;
    display:none;
    bottom:100px;
    right:80px;
}
p#back-to-top a{
    text-align:center;
    text-decoration:none;
    color:#d1d1d1;
    display:block;
    width:64px;
    /*使用CSS3中的transition屬性給跳轉連結中的文字添加漸層效果*/
    -moz-transition:color 1s;
    -webkit-transition:color 1s;
    -o-transition:color 1s;
}
p#back-to-top a:hover{
    color:#979797;
}
p#back-to-top a span{
    background:transparent url(/static/imgs/sprite.png?1202) no-repeat -25px -290px;
    border-radius:6px;
    display:block;
    height:64px;
    width:56px;
    margin-bottom:5px;
    /*使用CSS3中的transition屬性給<span>標籤背景顏色添加漸層效果*/
    -moz-transition:background 1s;
    -webkit-transition:background 1s;
    -o-transition:background 1s;
}
#back-to-top a:hover span{
    background:transparent url(/static/imgs/sprite.png?1202) no-repeat -25px -290px;
}

　　

上面樣式中的背景圖片是雪碧圖，下面提供兩個單獨的返回頂部圖片方便朋友們使用：

  有了html和樣式，我們還需要用js控制返回頂部按鈕，在頁面滾動時漸隱漸現返回頂部按鈕。

 代碼如下 複製代碼

?<script src="jquery-1.7.2.min.js"></script>
<script>
$(function(){
        //當捲軸的位置處於距頂部100像素以下時，跳轉連結出現，否則消失
        $(function () {
            $(window).scroll(function(){
                if ($(window).scrollTop()>100){
                    $("#back-to-top").fadeIn(1500);
                }
                else
                {
                    $("#back-to-top").fadeOut(1500);
                }
            });
 
            //當點擊跳轉連結後，回到頁面頂部位置
 
            $("#back-to-top").click(function(){
                $('body,html').animate({scrollTop:0},1000);
                return false;
            });
        });
    });
</script>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More