Automated scroll to reveal content - jQuery

Question

Apologies in advance if this questions comes of as naive/silly but I can't for the life of me think of where to begin.

I'll do my best to explain:

Im developing a website and to keep things simple lets say it has two steps for the registration process:

User clicks "join now" on homepage
User is redirected to a page containing a form to enter details.

Both pages are very simple and fit in the screen it their entirety. Now for a nice UX experience, what I would like to do is instead of redirecting to a new page, instead automate a scroll downwards revealing a space which was not there previously containing the registration form. (I hope that makes sense)

I have seen this implemented on a few websites, failing to think of any examples though.

I assume this is a jQuery task and I would be grateful if anyone can name the concept so I can start looking into it.

So what did you tried so far? – Tobias Golbs Jul 15 '13 at 22:42 — Tobias Golbs, Jul 15 '13 at 22:42

score 0 · Answer 1 · answered Jul 15 '13 at 22:44

I don't know the name of it, but you can fairly easy achieve this:

/* When the button for the form is clicked trigger function */
$("#linktoform").click(function(){
  /* Delay is set to 0 miliseconds */
  $("#idofform").show(0);
  /* Next line copied from: http://stackoverflow.com/q/4565381/ */
  $('html, body').animate({scrollTop:$('#form').position().top}, 'slow');
  });

Automated scroll to reveal content - jQuery

1 Answers1