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
- #container {
- height: 100%;
- }
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:
- var offset = $('#hiddenDiv').position().top;
- $('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:
- $(function(){
- $('#link').click(function(event){
- $('#hiddenPage').css("display", "block");
- offset = $('#hiddenPage').position().top;
- $('html body').animate({scrollTop:offset}, 1500);
- $('#container').delay(1500).queue(function(){
- $(this).css("display", "none");
- $('body').scrollTop(0);
- $(this).dequeue();
- });
- return false;
- event.preventDefault();
-
- })
- $("#scrollToTopButton").click(function(event){
- offset = $(window).height();
- $('#container').css("display", "block");
- $('body').scrollTop(offset);
- $('html body').animate({scrollTop:0}, 1500);
- $('#hiddenPage').delay(1500).queue(function(){
- $(this).css("display", "none");
- $(this).dequeue();
- });
- return false;
- event.preventDefault();
- })
- })
But this soution does not work very well in Safari & Firefox
Does anybody have a better solution for this ??