How to Scroll to an Element with jQuery Animation

By the end of this page, you will understand how to use jQuery to scroll the page to a specific element when another element is clicked. You will learn how click handlers, animate(), and offset().top work together to create a smooth scrolling effect, and how this pattern is used in real interfaces such as forms, navigation links, and validation flows.

Smooth scrolling in jQuery usually works by changing the scroll position of the page over time instead of jumping instantly.

The core idea is:

1. Detect a user action such as a click.
2. Find the vertical position of the target element.
3. Animate the page's scroll position until it reaches that target.

In jQuery, this is commonly done with:

• $(selector).click(...) or .on('click', ...) to detect the click
• $('#target').offset().top to get the target element's position from the top of the document
• $('html, body').animate({ scrollTop: ... }, duration) to scroll smoothly

Why this matters:

• It improves user experience by guiding the user visually.
• It helps long forms feel easier to navigate.
• It is often used in landing pages, navigation menus, validation summaries, and step-by-step forms.

Without animation, the page can jump abruptly. With animation, users can see where they are being taken.

Think of the web page as a long sheet of paper inside a window.

• The window shows only part of the page.
• The scroll position decides which part you are currently viewing.
• The target element, such as #submit, has a known location on that paper.
• jQuery's animate() acts like a smooth elevator moving the window down to that location.

So instead of teleporting the page view to the submit button, you smoothly slide there over a short period of time.

The basic jQuery pattern looks like this:

$('#subject').on('click', function () {
  $('html, body').animate({
    scrollTop: $('#submit').offset().top
  }, 800);
});

What each part does

• $('#subject') selects the input that the user clicks.
• .on('click', ...) runs code when that input is clicked.
• $('#submit').offset().top gets the vertical position of the submit button.
• $('html, body').animate(...) smoothly changes the page scroll position.
• 800 is the duration in milliseconds.

Full example

<input type="text" id="subject" name="subject">

<div style="height: 1200px;">

Consider this example:

<input type="text" id="subject">
<input type="submit" id="submit" value="Send">

$('#subject').on('click', function () {
  var targetTop = $('#submit').offset().top;

  $('html, body').animate({
    scrollTop: targetTop
  }, 1000);
});

Here is what happens step by step:

1. jQuery finds the element with id subject.
2. It attaches a click event listener to that element.
3. The user clicks inside the input field.
4. The click callback function runs.
5. $('#submit') finds the submit button.
6. .offset().top reads how far that button is from the top of the document.
7. That value is stored in targetTop.

Smooth scrolling to an element is common in many real applications:

• Long forms: Clicking a field or button scrolls to the next important section.
• Validation errors: After form submission, the page scrolls to the first invalid field.
• Single-page navigation: Menu links scroll to sections like About, Pricing, or Contact.
• Checkout pages: Clicking a summary item scrolls to payment or shipping details.
• Help panels: A link scrolls the user to a related explanation lower on the page.
• Chat or activity feeds: The interface scrolls to the newest message or item.

In your case, the pattern helps guide the user from the subject field down to the final submit action.

In real projects, developers usually do more than just call animate() once.

Common patterns include:

Event binding with .on()

$('#subject').on('click', function () {
  $('html, body').animate({ scrollTop: $('#submit').offset().top }, 800);
});

.on() is preferred because it is consistent and flexible.

Guard clauses for missing elements

In larger codebases, elements may not always exist.

$('#subject').on('click', function () {
  var $target = $('#submit');

  if ($target.length === 0) {
    return;
  }

  $('html, body').animate({
    scrollTop: $target.offset().
  }, );
});

Here are common beginner mistakes when implementing jQuery scrolling.

1. Using # inside the id attribute

This is incorrect:

<input id="#subject">

Use this instead:

<input id="subject">

The # is only used in CSS or jQuery selectors, not inside the actual id value.

2. Scrolling only body or only html

This may work in some browsers but fail in others:

$('body').animate({ scrollTop: 500 }, 800);

Safer approach:

$('html, body').animate({ :  }, );

jQuery scrolling vs native scrolling

$().({ : $().(). }, );

// Basic pattern
$('#subject').on('click', function () {
  $('html, body').animate({
    scrollTop: $('#submit').offset().top
  }, 800);
});

Key pieces

• $('#subject') → source element
• $('#submit') → target element
• .on('click', handler) → run code on click
• .offset().top → get vertical document position
• .animate({ scrollTop: value }, duration) → animate scroll

Safer version

$(function () {
  $('#subject').on('click', function () {
    var $target = $('#submit');

    if (!$target.length) {
      return;
    }

    $('html, body').().({
      : $target.().
    }, );
  });
});

How do I scroll to an element with jQuery?

Use animate() on $('html, body') and set scrollTop to the target element's offset().top.

Why use $('html, body') instead of just $('body')?

Different browsers attach page scrolling to different elements. Using both is a common jQuery solution for better compatibility.

How can I make the scroll slower?

Increase the duration value. For example, use 1000 instead of 400.

What does .offset().top return?

It returns the number of pixels between the top of the document and the top of the target element.

Can I scroll when an input gets focus instead of click?

Yes. Replace click with focus:

$('#subject').on('focus', function () {
  $('html, body').animate({ : $().(). }, );
});

• jQuery event handling — related because scrolling starts when a user action such as click or focus occurs.
• jQuery selectors — related because you must correctly target elements like #subject and #submit.
• DOM ready — related because event binding should happen after the page elements exist.
• jQuery animate() — related because it powers the smooth transition effect.
• offset() in jQuery — related because it gives the target element's position on the page.
• Form UX — related because smooth scrolling is often used to improve long forms and validation flows.
• Native smooth scrolling — related because modern JavaScript offers a non-jQuery alternative.
• Fixed headers and scroll offsets — related because scrolling often needs adjustment when a sticky header covers content.