Sharepoint 2013 頁面置頂（Topbar）小插件

Sharepoint  2013 頁面置頂（Topbar）小插件

需求分析：主頁面上加入Topbar功能，當頁面向下滾動了，就出現Topbar圖標，回滾到頁面頂部。但是，需求的母版頁中有底邊欄，當滾動到底邊欄時，TopBar要跟着底邊欄一起移動，這樣就有點難度了。效果如下圖：

代碼分析：

Topbar頁面佈局CSS：

.topbarFixed {
        display:inline-block;
        position:fixed;
        width:40px;
        height:40px;
        background-image:url("img/GoToTop_normal_icon.png");
        bottom:60px;
        left:50%;
        margin-left:-767px;
        z-index:9999;
    }

.topbarAbsolute {
        display:inline-block;
        position:absolute;
        width:40px;
        height:40px;
        background-image:url("img/GoToTop_normal_icon.png");
        bottom:10px;
        left:-60px;
        margin-left:0px;
        z-index:9999;
    }

.topbarAbsolute:hover, .topbarFixed:hover {
        background-image:url("img/GoToTop_mouseover_icon.png");
}
.topbarAbsolute:active, .topbarFixed:active {
        background-image:url("img/GoToTop_active_icon.png");
}

Topbar相關JS代碼：

/*
   Code for adding topbar.
   Author: [email protected]
   Created Date: 2014/03/07
*/

/*
    Using js to create widget, add the widget to page.
*/

(function ($) {
    $.fn.goTop = function () {
        return this.each(function (options) {
            var container = this;
            $(".sp-content").append("<a id='goto-top'></a>");
            $(".sp-content").css("position", "relative");
            //show or hide top bar
            $(container).scroll(function () {

                // explore height
                var w_height = $(container).height();

                // scroll height
                var scroll_top = $(container).scrollTop();

                if (scroll_top > 0) {
                    if ($(".sp-footer").offset().top <= (w_height + 60)) {
                        $("#goto-top").removeClass("topbarFixed");
                        $("#goto-top").addClass("topbarAbsolute");
                    }
                    else {
                        $("#goto-top").removeClass("topbarAbsolute");
                        $("#goto-top").addClass("topbarFixed");
                    }
                    $("#goto-top").css("display", "inline-block");
                } else {
                    $("#goto-top").removeClass("topbarFixed");
                    $("#goto-top").removeClass("topbarAbsolute");
                    $("#goto-top").css("display","none");
                }
            });

            //pin
            $("#goto-top").click(function (e) {
                e.preventDefault();
                $(container).animate({
                    scrollTop: 0
                }, 200);
            });
        });
    };
})(jQuery);

$(function(){
     $("#s4-workspace").goTop(); // $("#s4-workspace")是包含滾動條的外層div，sharepoint默認是$("#s4-workspace")
});

詳細講解：

1. 把TopBar設爲一個<a></a>標籤，通過添加CSS實現效果的切換

2. 核心部分是position的使用，包括：fixed和relative以及absolute之間的相互切換

邏輯：

1. $(".sp-content").append("<a id='goto-top'></a>")， 爲頁面動態添加TopBar標籤

2. 當頁面沒有出現底邊欄時，TopBar的position是fixed，這樣實現了TopBar始終在窗體左下角

3. 當出現底邊欄時，TopBar的position切換爲absolute，跟隨內容頁標籤$(".sp-content")變化，這樣保持了TopBar始終在底邊欄上面。

操作步驟：

把上述CSS和JS代碼加入Script Webpart就可以完成。