如何使用jQuery animate()函数在div中滚动? [英] How to scroll within a div with jQuery animate() function?

查看:81
本文介绍了如何使用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中滚动?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆