针对网页div层浮动,随滚动条滚动而移动,在各大门户网站上可以说随处可见。下面就应用系统实现div浮动实例说明:
应用系统展现内容时,由于内容过多,返回按钮放到页头或页末,对用户来说操作都不方面。这个实例就是实现div层“返回”按钮随滚动条滚动而滚动。
html代码:
<div id="backDivBtn">
<table align="center">
<tr align="center">
<td colspan="3">
<div style="overflow:hidden;width:100%;display:inline;">
<a href="javascript:void(0);" id="backBtn">
<div class="btn return">返回</div></a>
</div>
</td>
</tr>
</table>
</div>
js代码:
$(function(){
$(window).scroll(function(){
var yy = $(this).scrollTop();//获得滚动条top值
if ($(this).scrollTop() < 30) {
$("#backDivBtn").css({"position":"absolute",top:"30px",left:"90%"}); //设置div层定位,要绝对定位
}else{
$("#backDivBtn").css({"position":"absolute",top:yy+"px",left:"90%"});
}
});
});