Sharepoint  2013 页面置顶（Topbar）小插件

需求分析：主页面上加入Topbar功能，当滚动条滑过一个页面高度时，出现Topbar图标，回滚到页面顶部。

代码分析：

Topbar页面布局CSS：

.topbar {
        display:none;
        position:fixed;
        width:33px;
        height:33px;
        background-image:url("image/top.JPG");
        bottom:40px;
        left:40px;
        -webkit-transition:all 0.2s;
        -moz-transition:all 0.2s;
        -o-transition:all 0.2s;
        transition:all 0.2s;
        z-index:9999;
    }
.topbar:hover {
        background-image:url("image/gotop.jpg");
}

Topbar相关JS代码：

/*
   Code for adding topbar.
   Author: v-trdong@microsoft.com
   Created Date: 2014/03/07
*/

$(function () {
    // Add topbar lable
    $("#s4-workspace").append("<a id=‘goto-top‘></a>");
    $("#goto-top").goTop();
});
(function ($) {
    $.fn.goTop = function () {
        return this.each(function (i) {
            var topbar = this;
            $(topbar).addClass("topbar");

            //show or hide top bar
            $("#s4-workspace").scroll(function () {

                // explore height
                var w_height = $("#s4-workspace").height();

                // scroll height
                var scroll_top = $("#s4-workspace").scrollTop();

                if (scroll_top > w_height) {
                    $(topbar).fadeIn(0);
                } else {
                    $(topbar).fadeOut(0);
                }
            });

            //pin
            $(topbar).click(function (e) {
                e.preventDefault();
                $("#s4-workspace").animate({
                    scrollTop: 0
                }, 200);

                //support chrome
                $("#s4-workspace").animate({
                    scrollTop: 0
                }, 200);
            });
        });
    };
})(jQuery);

详细讲解：

用JS插件规范编写

操作步骤：

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

Sharepoint 2013 页面置顶（Topbar）小插件,布布扣,bubuko.com

Sharepoint 2013 页面置顶（Topbar）小插件

原文：http://blog.csdn.net/tristan_dong/article/details/20903037