html：

<div class=”cd-tool visible text-center”>
<a class=”cd-top”><span class=”fa fa-chevron-up”></span></a>
</div>

css

.cd-tool a {
position: fixed;
width: 50px;
height: 50px;
right: 30px;
opacity: .7;
background: #848484;
box-shadow: 0 0 10px rgba(0,0,0,.05);
white-space: nowrap;
-webkit-transition: all .3s;
transition: all .3s;
z-index: 2
}

@media screen and (max-width:768px) {
.cd-tool a {
width: 45px;
height: 45px;
right: 20px
}
}

js：

var gotop = function() {
var offset = 300,
offset_opacity = 1200,
scroll_top_duration = 700,
$back_to_top = $(‘.cd-top’),
$cd_gb = $(‘.cd-gb’),
$cd_weixin = $(‘.cd-weixin’);
$(window).scroll(function(){
( $(this).scrollTop() > offset ) ? $back_to_top.addClass(‘cd-is-visible’) : $back_to_top.removeClass(‘cd-is-visible cd-fade-out’);
if( $(this).scrollTop() > offset_opacity ) {
$back_to_top.addClass(‘cd-fade-out’);
$cd_gb.addClass(‘cd-fade-out’);
$cd_weixin.addClass(‘cd-fade-out’);
}
});
$back_to_top.on(‘click’, function(event){
event.preventDefault();
$(‘body,html’).animate({
scrollTop: 0 ,
}, scroll_top_duration
);
});
}

简版：

<style>
/*手机端 返回顶部 css*/
.m-top-wrap{
position: fixed;
bottom: 50px;
transition: all .3s;
z-index: 10;
right: 15px;
width: 48px;
}
.back-top{
cursor: pointer;
width: 46px;
height: 48px;
background-color:rgba(0,0,0,0.3);
background-repeat: no-repeat;
/*border: 1px solid #e5e9ef;*/
overflow: hidden;
border-radius: 4px;
}
.back-top i{
font-size: 18px;
line-height: 48px;
color: #FFFFFF;
}

</style>

<div class=”m-top-wrap visible-xs”>
<div class=”back-top icon text-center”>
<i title=”返回顶部” class=”fa fa-chevron-up”></i>
</div>
</div>

<script>
$(function() {
$(‘div.back-top’).click(function() {
$(‘html, body’).animate({
scrollTop: 0
}, 500);
});

});
</script>