返回頂部，js，css，頁面離開頂部一定距離後出現返回頂部，點擊後滾動回頂部，支援IE，FF，chrome ，safari，opera[摘自布布分享,tech.bubufx.com]

最後更新：2018-12-07 來源：互聯網

上載者：User

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

支援所有瀏覽器，返回頂部代碼，js實現，css輔助，頁面離開頂部一定距離後出現返回頂部按鈕或圖片，點擊返回頂部後滾動效果返回頂部。支援支援IE，FF，chrome ，safari，opera等瀏覽器。

全部代碼如下，將如下代碼存為htm檔案，運行看效果，同檔案夾下放返回頂部圖片“bubufx_top.jpg”

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>布布分享</title>    <style type="text/css">        #goTopImg        {            position: fixed;            text-align: center;            line-height: 30px;            width: 30px;            bottom: 60px;   /*離底部的距離*/            height: 33px;            font-size: 12px;            cursor: pointer;            right: 80px;   /*偏離右側的距離*/            _position: absolute;            _right: auto;        }    </style>    <script type="text/javascript">        function goTopFun() {            var bubufx_scrollheight = 600;     //頁面離開頂部的距離，超過該距離才出現返回頂部圖片            var obj = document.getElementById("goTopImg");                        function getScrollTop() {                return document.documentElement.scrollTop + document.body.scrollTop;    //解決多瀏覽器支援,chrome等瀏覽器下document.documentElement.scrollTop的值是0            }            function setScrollTop(value) {                //解決多瀏覽器支援                if (document.documentElement.scrollTop == 0) {                    document.body.scrollTop = value;                }                else {                    document.documentElement.scrollTop = value;                        }            }            window.onscroll = function () { getScrollTop() > bubufx_scrollheight ? obj.style.display = "" : obj.style.display = "none"; }            obj.onclick = function () {                var goTop = setInterval(scrollMove, 10);                function scrollMove() {                    setScrollTop(getScrollTop() / 1.1);                    if (getScrollTop() < 1) clearInterval(goTop);                }            }        }    </script></head><body>    <div style="height: 6000px; text-align: center;">        布布分享提示您，測試頁面，讓頁面變的更高高    </div>    <script type="text/javascript">                var bubufx_goTopImg = "bubufx_top.jpg";        document.write("<div style="display: none" id="goTopImg"><img border="0" src="" + bubufx_goTopImg + ""></div>");        goTopFun();    </script></body></html>

　　原文地址：http://tech.bubufx.com/infodetail_22.html

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 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