animate scrollTop to hidden div and back

animate scrollTop to hidden div and back

hello there,

I have a quite annoying issue with the animation of a scrollTop.
This is what I want:
I have a div 
  1. #container {
  2.       height: 100%;
  3. }
which is always supposed to be 100% height, except the content is longer than $(window).height().
Then there is a second hidden div, which should work like a second content-page underneath the container div.

When i click a button or link, the second page is set to "display: block" and I animate the scrolling:

  1. var offset = $('#hiddenDiv').position().top;
  2. $('html body').animate({scrollTop:offset}, 1000); 
So far so good :) This is working quite well in Chrome, but when i want to perform the reverse action (scroll back to top and hide the ' #hiddenPage' again, the page just jumps back to the top(Safari & Firefox). Therefore i tried to set the scrollTop manually.

This is what the js looks like at the moment:

  1. $(function(){
  2.   $('#link').click(function(event){
  3.     $('#hiddenPage').css("display", "block");
  4.     offset = $('#hiddenPage').position().top;
  5.     $('html body').animate({scrollTop:offset}, 1500);
  6.     $('#container').delay(1500).queue(function(){
  7.         $(this).css("display", "none");
  8.         $('body').scrollTop(0);
  9.         $(this).dequeue();
  10.     });
  11.     return false;
  12.     event.preventDefault();
  13.     
  14.   })

  15.   $("#scrollToTopButton").click(function(event){
  16.     offset = $(window).height();
  17.     $('#container').css("display", "block");
  18.     $('body').scrollTop(offset);
  19.     $('html body').animate({scrollTop:0}, 1500);
  20.     $('#hiddenPage').delay(1500).queue(function(){
  21.         $(this).css("display", "none");
  22.         $(this).dequeue();
  23.     });
  24.     return false;
  25.     event.preventDefault();
  26.   })
  27. })
But this soution does not work very well in Safari & Firefox
Does anybody have a better solution for this ??