如何使用jQuery animate()函数在div中滚动?

Ram*_*tra 15 javascript jquery

我有这个代码片段,将整个身体滚动到特定位置→

$('html, body').animate({ scrollTop: 1000}, 800, 'swing');
Run Code Online (Sandbox Code Playgroud)

但是,如果我想滚动到这样的div中的特定位置→

$('#div-id').animate({ scrollTop: 1000}, 800, 'swing');
Run Code Online (Sandbox Code Playgroud)

我试过这种方式,但它不起作用,你能告诉我哪里出错了吗?

注意:元素#div-id有溢出:auto作为其css规则之一.

S. *_*wat 26

试试这个演示:

$('#div').scroll();
$("#div").animate({
  scrollTop: 1000
}, 2000);
Run Code Online (Sandbox Code Playgroud)
#div {
  height: 100px;
  overflow: scroll;
  width: 200px;
  border: 2px solid red;
}
Run Code Online (Sandbox Code Playgroud)
<!DOCTYPE html>
<html>

<body>
  <div id='div'>
    dads dads dads dadsdads dadsdads dadsdads dadsdads dadsdads dadsdads dads dads dadsdads dadsdads dadsdads dadsdads dadsdads dadsdads dads dads dadsdads dadsdads dadsdads dadsdads dadsdads dadsdads dads dads dadsdads dadsdads dadsdads dadsdads dadsdads
    dadsdads dads dads dadsdads dadsdads dadsdads dadsdads dadsdads dadsdads dads dads dadsdads dadsdads dadsdads dadsdads dadsdads dadsdads dadsdads dadsdads dadsdads dadsdads dadsdads dadsdads dadsdads dads dads dadsdads dadsdads dadsdads dadsdads dadsdads
    dadsdads dadsdads dadsdads dadsdads dadsdads dadsdads dadsdads dadsdads dads
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</body>

</html>
Run Code Online (Sandbox Code Playgroud)

  • 谢谢你的答案,这对我有用,但我不明白为什么你调用scroll()函数然后再次animate(),它可以直接使用animate()我猜 (5认同)

Rah*_*thi 8

怎么样这样: -

function scrollingdiv(parentid, id){
    $("#"+parentid).animate({scrollTop: $("#"+id).position().top}, 800, 'swing');
}
Run Code Online (Sandbox Code Playgroud)