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就可以完成。