Question

In a guestbook I have a button at the bottom of the page which displays the input form on click:

$("a#showform").click(function(){ 
  $(this).hide();
  $("div#post").show("slow");
});

The problem is that the appearing form is outside the current view port and only manual scrolling makes the form visible to the user. I couldn't find any solution from the web but this must be a very common issue. Isn't there a jquery command to "stick to bottom" or similar?

Next thing is: I use nanoScroller on the whole page, so normal downscrolling methods won't work here. nanoScroller has a method scroll:"bottom" but it isn't smooth...

Thank you very much, Toni

Was it helpful?

Solution

You can easially scroll to the bottom of the page whenever your webpage expands :

 $("a#showform").click(function(){ 
        $(this).hide();
        $("div#post").show("slow");
        $('html, body').animate({
                                     scrollTop:$(document).height()
                                }, 'slow');
    });

you can set the 'slow' of the .animate() to any speed in miliseconds.

jsFiddle

OTHER TIPS

Just ajust the scrolling within your function

$("a#showform").click(function(){ 
  $(this).hide();
  $("div#post").show("slow");
  /* $(scroll magically to #post) */
  $("div#post").nanoScroller({ scroll: 'top' });
});

You may wish to use css to solve this problem if you aren't concerned with the post item covering other elements:

div#post {
  position: fixed;
  bottom: 0px;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top