效果基于jquery，首先需要引入jquery。

HTML代码：

<div id="backTop" style="display: block;"></div>

CSS代码：

#backTop {
    width: 54px;
    height: 54px;
    overflow: hidden;
    right: 15px;
    position: fixed;
    z-index: 100;
    bottom: 30px;
}
#backTop a {
    display: block;
    border-radius: 2px;
    width: 54px;
    height: 54px;
    overflow: hidden;
    background: url('图片路径') no-repeat;
}

Js代码：

$(document).ready(function(){
    //首先将#backTop隐藏
    $("#backTop").hide();
    //当滚动条的位置处于距顶部400像素以下时，跳转链接出现，否则消失
    $(function () {
        $(window).scroll(function(){
            if ($(window).scrollTop()>400){
                $("#backTop").fadeIn(500);
            }else{
                $("#backTop").fadeOut(500);
            }
        });
        //当点击跳转链接后，回到页面顶部位置
        $("#backTop").click(function(){
            $('body,html').animate({scrollTop:0},500);
            return false;
        });
    });
});