当页面滚动到一定的时候，出现回到顶部的操作

1、不需要插件的写法

css:

#scroll { position: fixed; right: 100px; bottom:30px; z-index: 1000; _position: absolute; _top: 100%; _right: 100px; _bottom: 0; }
.scrollItem { cursor: pointer; text-align: center; padding-top: 10px; opacity: 0.8; }

 

js:

$("#scroll").hide();

$(window).scroll(function(){

function get_scrollTop_of_body(){ //scrollTop能力检测函数
var scrollTop; 
if(typeof window.pageYOffset != 'undefined'){ 
scrollTop = window.pageYOffset; 
} 
else 
if(typeof document.compatMode != 'undefined' && 
document.compatMode != 'BackCompat'){ 
scrollTop = document.documentElement.scrollTop; 
} 
else 
if(typeof document.body != 'undefined'){ 
scrollTop = document.body.scrollTop; 
} 
return scrollTop; 
}
var myScroll=parseInt(get_scrollTop_of_body());
if(myScroll>10){
$("#scroll").fadeIn();

}else{
$("#scroll").fadeOut();}

});

var speed = 1000;//自定义滚动速度
//回到顶部
$("#toTop").click(function () {
$("html,body").animate({ "scrollTop": 0 }, speed);
});
//回到底部
var windowHeight = parseInt($("body").css("height"));//整个页面的高度
$("#toBottom").click(function () {
$("html,body").animate({ "scrollTop": windowHeight }, speed);
});

 

 

Html:

<div id="scroll">
<div id="toTop" class="scrollItem"> 回到顶部 </div>
<div id="toBottom" class="scrollItem"> 回到底部 </div>
</div>