页面中回到顶部的按钮的显示或隐藏

“回到顶部”按钮的显示或隐藏呢？其实我们只需要实现window.onscroll 事件即可，代码如 下：

-----第一种方法__原声js实现-----
window.onscroll = function () {
if (document.documentElement.scrollTop + document.body.scrollTop > 100) {
document.getElementById("scrollto").style.display = "block";
}
else {
document.getElementById("scrollto").style.display = "none";
}
}

 

-----第二种方法----

//回到顶部滚动条以动画形式移动
function goTop(){
$("html,body").animate({scrollTop: 0},"slow");
}

 

-----第三种方法__jQuery实现----

$(window).scroll(function () {
if($(window).scrollTop()>=100) {
$("#toTop").fadeIn(400); /* 当滑动到不小于 100px 时，回到顶部图标显示 */
}else {
$("#toTop").fadeOut(400); /* 当滑动到小于(页面被卷去的高度) 100px 时，回到
顶部图标隐藏 */
}
});

$("#toTop").click(function () {
$("html, body").animate({scrollTop: 0}, 100); /* 持续时间为 100ms */
return false;
});