如何使用jQuery animate（）函数在div中滚动？

问题描述：

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

I have this code snippet which scrolls the entire body to a particular location →

$('html, body').animate({ scrollTop: 1000}, 800, 'swing');

但如果我想要滚动到div中的特定位置，如此→

But what if i want to scroll to a particular location within a div like this →

$('#div-id').animate({ scrollTop: 1000}, 800, 'swing');

我试过这种方式但它不起作用，你能告诉我我在哪里吗？出错？

I tried this way but its not working, can you tell me where i am going wrong?

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

NOTE: The element #div-id has overflow:auto as one of its css rule.

答

试试这个演示：

$('#div').scroll();
$("#div").animate({
  scrollTop: 1000
}, 2000);

#div {
  height: 100px;
  overflow: scroll;
  width: 200px;
  border: 2px solid red;
}

<!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>

如何使用jQuery animate（）函数在div中滚动？

相关推荐