div.go-top {display: none
opacity: 0.6
z-index: 999999
position: fixed
bottom: 113px
left: 90%
margin-left: 40px
border: 1px solid #a38a54
width: 38px
height: 38px
background-color: #eddec2
border-radius: 3px
cursor: pointer}div.go-top:hover {opacity: 1
filter: alpha(opacity=100)}div.go-top div.arrow {position: absolute
left: 10px
top: -1px
width: 0
height: 0
border: 9px solid transparent
border-bottom-color: #cc3333}div.go-top div.stick {position: absolute
left: 15px
top: 15px
width: 8px
height: 14px
display: block
background-color: #cc3333
-webkit-border-radius: 1px
-moz-border-radius: 1px
border-radius: 1px}
使用fixed定位,让按钮始终出现在右下角,通过设定left:90%可以使按钮在右方出现,但又不会太紧贴滚动条。
按钮默认不可见,当滚动页面到一定高度后,按钮出现,这里用jQuery实现
$(function() {$(window).scroll(function() {if ($(window).scrollTop() >1000)$('div.go-top').show() else
$('div.go-top').hide()
}) $('div.go-top').click(function() {$('html, body').animate({scrollTop: 0}, 1000)
})
})
当按下按钮时,有动画效果返回顶部
HTML部分:<div id="tbox">
<a id="tbox_0" href="#">生活</a>
<a id="tbox_1" href="#">视频</a>
<a id="tbox_2" href="#">团购</a>
<a id="tbox_3" href="#">游戏</a>
<a id="tbox_4" href="#">美图</a>
<a id="gotop" href="javascript:void(0)" title="返回顶部" target="_self">返回顶部</a>
</div> js部分:
function a(x,y){
l = $('.footer').offset().left//默认值
w = $('.footer').width()//默认值
$('#tbox').css('left',(l + w + x) + 'px')
$('#tbox').css('bottom',y + 'px')
}
function b(){
//h = $(window).height()
h = 300
t = $(document).scrollTop()
if(t > h){
$('#gotop').fadeIn("slow")
}else{
$('#gotop').fadeOut("slow")
}
}
$(document).ready(function(e) {
a(10,10)
b()
$('#gotop').click(function(){
$(document).scrollTop(0)
})
/*
$("#tbox a").css({opacity:0.8})
$("#tbox a").hover(function(){
$(this).css({opacity:1})
},function(){
$("#tbox a").css({opacity:0.8})
})
*/
})
$(window).resize(function(){
a(10,10)
})
$(window).scroll(function(e){
b()
}) CSS部分:
*html{background-image:url(about:blank)background-attachment:fixed}
#tbox{width:55pxheight:415pxfloat:rightposition:fixedz-index:999
_position:absolute
_bottom:auto
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,8)||0)-(parseInt(this.currentStyle.marginBottom,8)||0)))
_margin-bottom:8px
}
#tbox a{width:55pxheight:55pxposition:absolutecursor:pointerbackground:#000000}