Show div and move to top of page

Question

At the moment I'm only showing/hiding the div box when I click the button:

$j('#button').click(function () {
   $j('#box').slideToggle();
   return false;
});

But I would like to move the box to the top of the page as well when it's shown and then just hide it when clicked again. the code below doesn't seem to work:

$j('#button').click(function () {
   $j('#box').slideToggle();
   $j('html').animate({
      scrollTop: $j('#box').offset().top
   },400);
   return false;
});

Am I doing something wrong?

Answer 1

You have to set the animate statement to the box, too.

I created a demo for you, hope I understood what you want to do :-)

Demo will toggle the hidden div and then move it to the top of the window

$('#button').click(function() {
  $('#box').slideToggle();
  $('#box').animate({ top: 0 }, 400);
  return false;
});

http://jsfiddle.net/b11kmnkp/