回到顶部的设置

标签：style   io   os   ar   strong   div   sp   cti   on   

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>

回到顶部的设置

标签：style   io   os   ar   strong   div   sp   cti   on   

原文地址：http://www.cnblogs.com/fangdx/p/3973329.html