How to scroll to the bottom or top of a div with overflow

Question

I have some div with a lot of content, i want to scroll some divs inside the main div into view. so this is mainly the y-overflow scroll with x-overflow hidden.

I don't want to scroll the window or body but only the div's contents.

$(document).on("click", ".CommentBut", function() {
 //////when the Comment button is clicked.////
 $('#QuickRead').scrollTop()
////Scroll Quick Read Div to the top./////
});

But the above is not working and i think probably there's something wrong with my method or syntax.

Answer 1

Use following to goto top , here take dom element by ID, then do scrolling ,1st parameter is where to scroll (in pixels) ,2nd is time to scrolling.

jQuery("#QuickRead").animate({scrollTop: 0}, 1);

To goto bottom :

  var $target = jQuery("#QuickRead"); 
  $target.animate({scrollTop: $target.height()}, 1000);

Answer 2

well you can say its a kind of bug. Some browsers apply the "overall" scroll to document.documentElement (the element) and others to document.body (the element). For compatibility with both, you have to apply the scrolling to both..

try below thing

if($.browser.safari) bodyElement = $("body")
else bodyElement = $("html,body")

bodyElement.scrollTop(100)

update :

$("#QuickRead").animate({scrollTop:$('#div_id').position().top}, 'slow');