jquery实现的返回顶部+侧边栏功能

html代码：

class="mask">
id="sidebar">
    

        
href="">item1
        
href="">item2
        
href="">item3
        
href="">item4
        
href="">item5
    


class="back-to-top">返回顶部

css代码：

#sidebar{
    position: fixed;
    top:0;
    right: -300px;
    bottom: 0;
    width: 300px;
    background: #333;
    color: #fff;
    padding: 20px 0;
    transition: right 0.5s;

}

#sidebar ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

#sidebar ul a{
    color: #fff;
    display: inline-block;
    padding: 10px 30px ;
    width: 100%;

}

#sidebar ul a:hover{
    background: #444;
}

.mask{
    position: fixed;
    top:0;
    right: 0;
    bottom: 0;
    left:0;
    background: rgba(0,0,0,0.2);
    display: none;
}

.back-to-top{
    position: fixed;
    bottom: 30px;
    right: 30px;
    border: 1px solid #888;
    border-radius: 5px;
}

js代码：

;$(function () {
    'use strict';

    var sidebar=$('#sidebar'),
        sidebar_trigger=$('#sidebar-trigger'),
        mask = $('.mask'),
        back_to_top = $('.back-to-top');

    function show_sidebar() {
        mask.fadeIn();
        sidebar.css({
   'right':'0'});
    }

    function hide_sidebar() {
        mask.fadeOut();
        sidebar.css({
   'right':-sidebar.width()});
    }

    function back() {
        $('html,body').animate({
            'scrollTop':'0'
        },800);
    }

    sidebar_trigger.on('click',show_sidebar);
    mask.on('click',hide_sidebar);
    back_to_top.on('click',back);

    $(window).on('scroll',function () {
       if($(window).scrollTop() > 0){
           back_to_top.css({
               'display':'block'
           });
       }else{
           back_to_top.fadeOut();
       }
    });

    $(window).trigger('scroll');

});

原视频链接：http://www.imooc.com/learn/598