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)
})
})
当按下按钮时,有动画效果返回顶部
Position属性确认元素的定位
static 是默认定位值,它的定位元素不受top、left、right、bottom的影响,也就是说你给元素设置这四个属性的任何值都没有效果
relative 相对定位,设置相对定位元素的top、left、right、bottom会使当前元素相对于当前位置做一定的偏移。
比如说在做表单布局的时候,有时候label的值并没有和输入框上下居中对齐,它有一点点偏下,效果不是很好看,这个时候我们可以给label向上设置一下偏移让他们居中对齐
absolute是绝对定位,绝对定位的元素相对于最近的定位祖先元素进行定位,如果没有定位祖先元素,那么就按body定位
absolute最典型的例子就是结合relative一块完成效果,比如我有一个p,它是在页面居中的,但是它的宽度和高度是动态的,我们还有一个span标签希望永远在这右下角10px的位置,这个时候我们就可以利用absolute完成
fixed 是相对视口定位的,简称浮云定位,这个意味着就像你滚动页面,它始终位于同一个位置,top、left、right、bottom用于设置当前元素的位置。
常用的例子就是页面右下角,滚动到顶部的的功能,我们可以对这个元素设置fixed浮动定位,当用户一直向下滚动浏览网页后,想一下子回到顶部,它只要点这个元素就行了,因为之个元素是浮云定位,所以永远是在用户可视范围的右下角
单凭DIV+CSS恐怕不行,你要是会JQ可以这么干:
//jq部分$(document).scroll(function(e) {
if($(document).scrollTop()!=0){
$("#test2").stop()
$("#test2").animate({"top":"0"})
}
else{
$("#test2").stop()
$("#test2").animate({"top":"20px"})
}
}) <!-- HTML部分 -->
<div id="test2"></div> /* CSS部分 */
#test2 { position:fixed top:20px background:#F30 }