方法一：简单返回顶部

1、html代码

<div style="min-height: 1500px;width: 90%;border:1px solid #f00;"></div>
<div class="returnTop" style="display: block;">顶部</div>

2、css代码

.returnTop{
    position:fixed;
    right:4%;
    bottom:4%;
    width:56px;
    height:56px;
    background:#666;
    border-radius:56px;
    text-align:center;
    transition:500ms;
    line-height:56px;
    display:none;
    font-size:16px;
    z-index:999999999;
    color:#fff;
    cursor:pointer;
}

3、js代码

// 返回顶部
$('.returnTop').on('click', function() {
    $("html,body").animate({
        scrollTop: 0
    }, 300, function() {});
})//这里的300可自定义，是返回顶部的时间

方法二：当页面滚动到指定位置时，出现返回顶部

1、HTML代码

<div class="wrap">
    <div class="red">
        内容
    </div>
    <div class="green">
        内容
    </div>
    <div class="yellow">
        内容
    </div>
</div>
<a href="#" id="back-top">Top</a>

2、css代码

 .wrap {
    height:2000px;
}
.red {
    background:red;
    height:600px;
}
.green {
    background:green;
    height:600px;
}
.yellow {
    background:yellow;
    height:800px;
}
#back-top {
    position:fixed;
    width:60px;
    height:60px;
    bottom:30px;
    right:30px;
    background:#ccc;
    text-align:center;
    line-height:60px;
    text-decoration:none;
}

3、js代码

 $(function() {

     //先将#back-top隐藏
     $('#back-top').hide();

     //当滚动条的垂直位置距顶部100像素一下时，跳转链接出现，否则消失
     $(window).scroll(function() {
         if ($(window).scrollTop() > 100) {
             $('#back-top').fadeIn(1000);
         } else {
             $("#back-top").fadeOut(1000);
         }
     });

     //点击跳转链接，滚动条跳到0的位置，页面移动速度是1000
     $("#back-top").click(function() {
         $('body').animate({
             scrollTop: '0'
         }, 1000);
         return false; //防止默认事件行为
     })
 })