/*返回顶部的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');});