javascript - How to scroll within a div with jQuery animate() function?

Question

Welcome To Ask or Share your Answers For Others

javascript - How to scroll within a div with jQuery animate() function?

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - How to scroll within a div with jQuery animate() function?

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T18:38:58+0000

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>

Categories

javascript - How to scroll within a div with jQuery animate() function?

javascript - How to scroll within a div with jQuery animate() function?

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags