jq返回顶部按钮

返回顶部按钮，在页面过长的时候，用户想要回到顶部，需要不停得拖滚动条，而有了回到顶部按钮，用户就可以快速回到顶部，用户体验大大提高。

<button class="back-to-top">返回顶部</button>

问题：如何用jq返回顶部

事件：点击按钮时页面在0.8秒内，滚动条回到高度为0；

$(function(){

var backButton=$('.back-to-top');

backButton.on('click',function(){

$('html,body').animate({scrollTop:0});

});

});

问题：当页面已经在顶部时，按钮还在，不好看，怎么在页面在最顶端的时候去掉按钮

解决方案：当滚动的高度大于屏幕的高度的时候再让按钮显示

问题：按钮直接显示和出现，动画过于僵硬

解决方案：使用jq的fadeIn、fadeOut方法实现淡入淡出效果

$(window).on('scroll',function(){

if ($(window).scrollTop() > $(window).height()) {//页面滚动高度大于屏幕高度

backButton.fadeIn();

} else {

backButton.fadeOut();

}

})

问题：页面刷新后返回顶部按钮存在，只有滚动才消失

解决方案：使页面一开始就触发滚动命令

$(window).trigger('scroll'）