代码之家 › 专栏 › 技术社区 › eozzy

jQuery中的ScrollBot?

scroll jquery

eozzy · 技术社区 · 14 年前

$(window).scroll(function() {
    $('#myElement').css('top', $(this).scrollTop() + "px");
});

非常感谢

2 回复 | 直到 14 年前

Pat 14 年前

可以通过将元素的高度添加到 scrollTop

$(window).scroll(function() {
    var myElement = $('#myElement');
    myElement.css('top', $(this).scrollTop() + $(this).height() - myElement.height() + "px");
});

或者,你有没有考虑过使用 position: fixed CSS expressions

user372551 user372551 14 年前

以下是我的代码,请尝试演示: 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>

$(document).ready(function() {
  $('#scrollDown').click(function() {
    var height = $('html,body').height();
    $('html,body').stop().animate({scrollTop: height},2000);
  });
});

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

4 月前

Dr.0000FF · jQuery按钮点击不显示/隐藏内容

5 月前

user28928120 · 如何在jquery中选择所有类?

5 月前

LauraNMS · 如何使用Waypoints js实现粘性元素和偏移量

5 月前