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

html代码：

<div class="mask"></div><div id="sidebar">    <ul>        <li><a href="">item1</a></li>        <li><a href="">item2</a></li>        <li><a href="">item3</a></li>        <li><a href="">item4</a></li>        <li><a href="">item5</a></li>    </ul></div><button class="back-to-top">返回顶部</button>

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