ScrollBot in jQuery?
$(wind开发者_高级运维ow).scroll(function() {
$('#myElement').css('top', $(this).scrollTop() + "px");
});
works great, but what if I want it fixed to the bottom instead of top?
Many thanks
You could do it by adding the element's height to the scrollTop value:
$(window).scroll(function() {
var myElement = $('#myElement');
myElement.css('top', $(this).scrollTop() + $(this).height() - myElement.height() + "px");
});
Alternatively, have you looked into using position: fixed? It works well in all browsers except IE, and you can get around it with CSS expressions.
Here's my code & try out the demo : http://jsbin.com/aguca3
HTML :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#scrollDown {
color : #0099f9;
border:5px solid #2f2f2f;
background:#d5d5d5;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
position:fixed;
top:30px;
right:30px;
font:bold 14px Verdana;
padding:5px;
cursor:pointer;
}
#scrollDown:hover {
color:#fcfcfc;
background:#000;
border-color:#0099f9;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Change text</title>
</head>
<body>
<div id="scrollDown" > Scroll Down </div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<span style="float:right;"> you have Reached the End of page</span>
</body>
</html>
Javascript :
$(document).ready(function() {
$('#scrollDown').click(function() {
var height = $('html,body').height();
$('html,body').stop().animate({scrollTop: height},2000);
});
});
加载中,请稍侯......
精彩评论