0

I have some jquery code which opens hidden divs on my page from a dynamic list of data, the trouble is if you click a row from low down on the page it opens the div below the bottom of the page and you have to scroll down to see it, is there a way to set some sort of anchor or get jqyer to scroll to bottom of div when it opens so the user can see it?

here is my code:

//CHECK IF ROW IS VISIABLE
if (!$('#'+rowid).is(':visible')) {
//HIDE ANY OPEN ROWS
$("#tableToggle tr.toggleable").fadeOut('fast', function() { });
//DO SLIDE LOAD FUNCTION
$('#'+rowid).slideDown('slow', function() { });
$("#einfo"+rowid).load(url, function(response, status, xhr) {
if (status == "success") { $("#loader"+rowid).hide(); $('#einfo'+rowid).slideDown('slow'); } });
//HIDE ALL TOGGLEABLE ROWS
}else { $("#tableToggle tr.toggleable").fadeOut('fast', function() { });}

Thanks for looking, hope you can help

D J
  • 165
  • 1
  • 2
  • 8
  • Have you tried the `$.scrollTop()` method? http://stackoverflow.com/questions/832860/how-to-scroll-the-window-using-jquery-scrollto-function – Jason Towne May 31 '12 at 15:05
  • Yes does not do anything, I tried adding after slide down with the div ID and on the loaded divs if document ready but both did nothing – D J May 31 '12 at 15:38

1 Answers1

0

You can scroll to the div in question using $('html').scrollTop() which you can use to adjust the window's scroll bar to the correct. To determine the correct height, get the scrollTop() property of the target element.

Example code may look like:

$('html').scrollTop($('#myDivContainer').scrollTop()); // Scroll to desired element

Additionally, you can have a smoother transition by using jQuery's animate function:

$('html').animate({ scrollTop: $('#myDivContainer').scrollTop() }, 2000); // Animated scroll over 2 seconds

Note that .scrollTop will return zero to display:none styled elements, so be sure to fire this code after unhiding the container.

Andy Baird
  • 6,088
  • 4
  • 43
  • 63
  • I tried this but it does not do anything, I tried adding after slide down with the div ID and on the loaded divs if document ready but both did nothing $('html').scrollTop($('#einfo'+rowid).scrollTop()) – D J May 31 '12 at 15:39
  • @DJ Are you sure there's an element that matches `#einfo'+rowid`? Perhaps your selector isn't finding the element. Maybe if you created a fiddle that would help us help you. http://www.jsfiddle.net – Jason Towne May 31 '12 at 15:53
  • @DJ it doesn't work for me too. try to change this code to : $('html').animate({ scrollTop: $('#myDivContainer').offset().top }, 2000); – Mosijava May 03 '15 at 08:17