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

Question

I have this code snippet which scrolls the entire body to a particular location → 我有这个代码片段，将整个身体滚动到特定位置→

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

But what if i want to scroll to a particular location within a div like this → 但是，如果我想滚动到这样的div中的特定位置→

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

I tried this way but its not working, can you tell me where i am going wrong? 我试过这种方式，但它不起作用，你能告诉我哪里出错了吗？

NOTE: The element #div-id has overflow:auto as one of its css rule. 注意：元素#div-id有溢出：auto作为其css规则之一。

Answer 1

Try this demo: 试试这个演示：

 $('#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>

Answer 2

How about trying like this:- 怎么样这样： -

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

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

问题描述

2 个解决方案

解决方案1
24 已采纳 2013-08-31 07:16:11

解决方案2
8 2013-08-31 07:01:01

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

问题描述

2 个解决方案

解决方案1 24 已采纳 2013-08-31 07:16:11

解决方案2 8 2013-08-31 07:01:01

解决方案1
24 已采纳 2013-08-31 07:16:11

解决方案2
8 2013-08-31 07:01:01