Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery: move window viewport to show freshly toggled element

I have a snippet of jQuery in doc ready which toggles a div containing a textarea:

$('div#addnote-area').hide(); // hide the div
$('a#addnote-link').click(function() { // click event listener on link
     $('div#addnote-area').toggle(); // toggle the hidden div 
});

The toggle works fine when clicking the link. The problem I'm having is that if div#addnote-area is below the browser's current viewport, it remains there when it's shown. I'd like the user's cursor to go to the textarea and for the whole textarea to be viewable in the window.

Click here to see an image

like image 362
k00k Avatar asked Feb 24 '10 20:02

k00k


3 Answers

Without the scrollTo plugin

$(window).scrollTop($('div#addnote-area').offset().top)

EDIT: Well I sure get a lot of points from this old answer :)

Here's a bonus, this can also be animated.

Just use the animate() function and target the body tag:

$('body').animate({scrollTop:$('div#addnote-area').offset().top},500)

Try it on Stackoverflow! Open the inspector console and run

$('body').animate({scrollTop:$('#footer').offset().top},500)

like image 81
Ben Avatar answered Nov 15 '22 15:11

Ben


Check out the scrollTo jQuery plugin. You can simply do something like this:

$.scrollTo('div#addnote-area');

Or, if you want to animate it, provide the # of milliseconds for the scrolling to last:

$.scrollTo('div#addnote-area', 500);
like image 44
Matt Huggins Avatar answered Nov 15 '22 15:11

Matt Huggins


jQuery's scrollTop also works. Try setting like:

 $('#idOfElement').css('scrollTop', 10)

You can get height/width pretty easily using $(...).offset().

like image 24
Nathan Garrett Avatar answered Nov 15 '22 15:11

Nathan Garrett