您的位置：首页 > 其它

实现返回顶部按钮一直在页面底部（兼容ie6）

2016-05-26 15:40 656 查看

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="./jquery-1.8.0.js"></script>
<style type="text/css">
.back_top {width: 100px; height: 100px; border: 1px solid purple; text-align: center; line-height: 100px; display: none;}
.change {position: absolute; left: 600px; display: block; cursor: pointer;}
</style>
</head>
<body>
<div style="width:500px; height:2200px; border:1px solid red; margin:0 auto; position:relative;">
<div style="margin-top:10px; border:1px solid blue;">a</div>
<div style="margin-top:2140px; border:1px solid blue;">b</div>

<div class="back_top">
返回顶部
</div>
</div>

<script type="text/javascript">
$(window).resize(function() {
$('.back_top').css('bottom', $(document.body).height() - $(window).scrollTop() - $(window).height()  + 10);
});

$(window).scroll(function() {
$('.back_top').addClass('change');
$('.back_top').css('bottom', $(document.body).height() - $(window).scrollTop() - $(window).height() + 10);

if($(window).scrollTop() === 0) {
$('.back_top').removeClass('change');
}
});

$('.back_top').on('click', function() {
$(window).scrollTop(0);
});
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 底部返回顶部按钮浮动兼容ie6

相关文章推荐

新的分享

章节导航