Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab amet debitis, dolore eveniet illo maiores nam neque nesciunt perspiciatis praesentium quaerat qui, quidem rem sequi similique sunt ullam voluptate voluptates!

CSS代码：

*{margin:0; padding:0;}
a{color:#000; text-decoration:none;}
.main{width:100%; height:1500px;}
.backContainer{position:fixed; right:40px; bottom:40px;}
#backTop{display:block; width:46px; height:46px; background:url('p_w_picpaths/go-top.png') no-repeat 0 -100px;}
#backTop:hover{background-position-y:-150px;}

“回到顶部”按钮及鼠标移入时效果截图：

JS代码：

$('.backContainer').hide();
$(window).scroll(function(){
    //当窗口相对于滚动条顶部的偏移大于150px时，显示跳转按钮，否则不显示
    if($(window).scrollTop() > 150){
        $('.backContainer').fadeIn('slow');
    }else{
        $('.backContainer').fadeOut('slow');
    }
});
//当点击跳转按钮时
$('#backTop').click(function(){
    $('html').animate({
        scrollTop:0
    },1000);
})

scroll([[data],fn]): 

当用户滚动指定的元素时，会发生 scroll 事件。  

scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。

$(window).scroll( function() { /* ...do something... */ } );

animate(params,[speed],[easing],[fn])

用于创建自定义动画的函数。  这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left. 

// 在一个动画中同时应用三种类型的效果

$("#go").click(function(){   

    $("#block").animate({      

        width: "90%",     

        height: "100%",      

        fontSize: "10em",      

        borderWidth: 10   

            }, 1000 );

 });

scrollTop([val])

获取匹配元素相对滚动条顶部的偏移, 此方法对可见和隐藏元素均有效。

感谢各位的阅读！关于“如何用js和jQuery实现回到页面顶部功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！