Question

I need to scroll a page with content from top to bottom
and a navigation have ‘show top’ anchor. when i clicked on ‘show top’ anchor then a page(which is not showing before) will scroll from top to main screen area with content.

.topPage{
    width:1280px; 
    color:#000; 
    float:left; 
    position:relative;
    background:#E6E6E8;
}


$('a.scrollToBottom').click(function(){
  $('html, body').stop().animate({
scrollTop: $("#topPage").offset().top
  }, 2000);
// event.preventDefault();
});

But the page (topPage) scrolling from bottom to top..
I need to scroll from top to bottom to show in main screen area.

Answer 1

Your problem is that the div is placed at a negative top offset. You can’t scroll past 0 vertically, so the scroll stops once you hit the top and you won’t be able to see all of your div.

If you want the div to animate, consider using

$('.topcontent').stop().animate({
    top: 0
}, 2000);

instead.