如何為自己的網頁實現一個“回到頂部”的鏈接?

引子

“回到頂部”是目前內容比較多的網頁常用的解決方式，能快速讓用戶回到頁面的頂端。比如我經常去的旅游網站——馬蜂窩，就有一個非常不錯的“回到頂部”快捷按鈕或者叫鏈接，特別喜歡這個火箭的圖片，“回到頂部”不就是讓用戶像火箭一樣快地返回地球(Top)么?

目前網絡上有各種各樣的樣式，就像這個多元的世界，蘿卜白菜，各有所愛，不信請看下圖(此圖來自度娘)：

這篇文章主要是想討論一下目前比較常見的“回到頂部”功能的解決方案。

開門見山

“回到頂部“(Back to Top)其實就是通過錨點(anchor)和鏈接(links)來實現在頁內跳轉。

錨的定義是節點的內容的某個區域可以是鏈接的目標或源。錨點就像普通鏈接的目標，唯一不同的是一個在頁面內部的某一區域，一個是外部頁面。 沒有什么內容，直接看W3C School上的教程。

下面是一個簡單的錨點應用的例子：

一個最原始的例子

有了上面的理論基礎，我們就可以開始嘗試在我們的頁面實現一個最簡單的“回到頂端”。 大概的實現過程就是：

1. 在頁面最頂端定義一個錨點。
2. 在頁面的其他地方（頁底或頁面的任何地方）定義一個指向這個錨點的鏈接。
3. 點擊鏈接回到頁面頂端(Back to Top)。

下面的例子就是一個具有最簡單“回到頂端”功能的頁面：

當然，上面的例子沒有太多樣式，只是簡單的呈現出文字，你可以給“回到頂端”這個鏈接添加任何你想要的效果。

利用JQuery實現“回到頂部”

JQuery是目前最火的Javascript腳本庫，由於其輕量這個特點，被廣泛使用於各種網站中。 本節主要介紹如何用JQuery來實現一個“返回頂端”的按鈕。

基礎准備

假如我們有這樣一個簡單的頁面：

HTML:

<div class="container">
    <div class="content"></div>
</div>

CSS:

.container {
    width:80%;
    margin:0 auto;
    height:auto;
    min-height:100%;
    position:relative;
}
.content {
    padding: 10px;
    margin: 20px;
    border: 2px solid #777777;
}
p#goToTop {
    position:fixed;
    bottom:15px;
    right:15px;
    z-index: 99;
}
p#goToTop a {
    text-align:center;
    text-decoration:none;
    display:block;
    width:36px;
    z-index: 99;
}
p#goToTop a span {
    background: url("http://images.cnblogs.com/cnblogs_com/EasonWu/201944/o_m-gotop.png") no-repeat scroll left top rgba(0, 0, 0, 0);
    display:block;
    height: 96px;
    width: 36px;
}
#goToTop a:hover span {
    background-position: right top;
}

Image:

你也許會發現，我們這里的HTML頁面結構里面，既沒有設置錨點的代碼，也看不到“返回頂端”的鏈接。 難道有問題？其實不然，請出大神JQuery。

JQuery Code:

$(function () {
    var topPosition = "<div id='top'></div>"; //定義頂部錨點的標簽
    var goToTopButton = "<p id='goToTop'><a href='#top'><span></span></a></p>"; //定義按鈕標簽
    $("div.container").prepend(topPosition); //在container的div最前面加上錨點標簽
    $("div.container").append(goToTopButton); //在container的div最后面加上按鈕標簽
    $("#goToTop").hide(); //首先將#goToTop隱藏
    //當滾動條的位置處於距頂部100像素以下時，跳轉鏈接出現，否則消失
    $(function () {
        $(window).scroll(function () {
            if ($(window).scrollTop() > 100) {
                $("#goToTop").fadeIn(1500);
            } else {
                $("#goToTop").fadeOut(1500);
            }
        }); //當點擊跳轉鏈接后，回到頁面頂部位置
        $("#goToTop").click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 1000);
            return false;
        });
    });
});

代碼演示

編寫一個簡單的JQuery插件

針對上面的例子，我們可以嘗試着將其改寫成一個JQuery的插件。 因為水平有限，這個只做拋磚引玉之用。

// 編寫一個插件叫做goToTop
jQuery.fn.goToTop = function (settings) {
    settings = jQuery.extend({
        min: 100, //設置距離頂部的最小值為100
        fadeSpeed: 200, //設置一個淡出淡入的速度
        ieOffset: 120 //處理IE的兼容問題
    }, settings);

    return this.each(function () {
        //listen for scroll
        var el = $(this);
        //in case the user forgot
        el.css("display", "none");
        $(window).scroll(function () {
            /* stupid IE < 9 hack
            if (!jQuery.support.hrefNormalized) {//設置這個按鈕的css屬性
                el.css({
                    "position": "absolute",
                    "top": $(window).scrollTop() + $(window).height() - settings.ieOffset
                });
            } */

            if ($(window).scrollTop() >= settings.min) {
                el.fadeIn(settings.fadeSpeed);
            } else {
                el.fadeOut(settings.fadeSpeed);
            }
        });
    });
};

$(function () {
    var topPosition = "<div id='top'></div>"; //定義頂部錨點的標簽
    var goToTopButton = "<p id='goToTop'><a href='#top'><span></span></a></p>"; //定義按鈕標簽
    $("div.container").prepend(topPosition); //在container的div最前面加上錨點標簽
    $("div.container").append(goToTopButton); //在container的div最后面加上按鈕標簽

    if ($(window).scrollTop() < 1) {
        $("#goToTop").hide(); //滾動條距離頂端的距離小於showDistance是隱藏goToTop按鈕
    }

    $("#goToTop").goToTop({
        min: 1,
        fadeSpeed: 1500
    });

    $("#goToTop").click(function (e) {
        //當點擊跳轉鏈接后，回到頁面頂部位置
        e.preventDefault();
        $("html,body").animate({
            scrollTop: 0
        }, 1000);
    });
});

插件版演示:

這里有一外國大牛的GotoTop插件： UItoTop jQuery Plugin, 有興趣的可以研究一下。

其他jQuery版返回頂端(Back to Top)鏈接的方法

這里主要介紹幾個一篇博客中介紹的jQuery版解決方法。 10 jQuery Back To Top Link Solutions For Websites

• Back to Top Link Using jQuery
  這個方案會在頁面右下角漸顯一個橫向的矩形鏈接框，用戶點擊是返回頁面頂部， 然后消失。
• David Walsh’s jQuery topLink Plugin
  由David Walsh開發，這個插件應該是目前最簡潔的一個方案。
  
• Animated jQuery “Back to top” plugin
  這個方案的外觀樣式雖然一般，但動畫效果確實很贊。
  
• Disappearing “Scroll to top” link with jQuery and CSS
  這個方案具有一個更加咄咄逼人的樣式， 直接將“返回頂端”的鏈接放在頁面底部的中間。
  
• UItoTop jQuery Plugin
  如果你不想要文字版，試試這個箭頭效果的方案。
  
• jQuery Scroll to Top Control v1.1
  一個來自Dynamic Drive的“返回頂部”解決方案。
  
• Scrolling to the Top and Bottom with jQuery
  這個絕對是一個非常有用的方案， 同時擁有向上和向下滑動的功能。
  
• Scroll to Top WordPress Plugin
  如果你想要一個針對WordPress的快速解決方案，試試這個WordPress插件版的“返回頂部”。
  
• Go to Top WordPress Plugin
  又一個“返回頂部”的WordPress插件。
  
• WP To Top
  另一個“返回頂部”的WordPress插件解決方案。
  

資源共享

• 100個"Back to Top"圖標
  

參考文獻

• 10 jQuery Back To Top Link Solutions For Websites