Smooth scroll to element with jQuery: 5 fatal mistakes

Have you ever tried to scroll a page to the desired block, but it stubbornly stayed in place? Sound familiar?

Imagine: you are writing a landing page, an online store, or just a page with a long list of products. The user clicks the "Learn More" button, and you want the page to smoothly, beautifully, like in a good movie, scroll to the desired section. You open Stack Overflow, find the question "Scroll to an element with jQuery" (by the way, it has tens of thousands of views!), copy the code... And then the magic begins.

Sometimes the scroll works, sometimes it doesn't. Sometimes the page jerks, sometimes it scrolls to the wrong place. And sometimes it breaks completely in IE. Sound familiar? Today we will analyze the top 5 most popular mistakes that developers make when implementing smooth scroll to an element with jQuery. And, of course, we will show how to fix them once and for all.

Mistake #1: Forgot about animation. The scroll exists, but it's abrupt

The most common problem is using plain scrollTop() without animation. The code works, but the user simply teleports to the block. This looks unprofessional and disorients the user.

❌ Incorrect:

// Simply jump to the element — bad\n$('html, body').scrollTop($('#mySection').offset().top);\n

✅ Correct: use .animate()

$('html, body').animate({\n    scrollTop: $('#mySection').offset().top\n}, 800); // 800 ms — ideal for smoothness

Why is this important? Smooth scroll to an element with jQuery with animation improves UX (User Experience) and holds the user's attention. 800 milliseconds is the sweet spot: not too fast, not too slow.

Mistake #2: Ignoring offset. Scrolling past the target

Imagine: you have a fixed site header 80 pixels high. You scroll to a block, but it ends up under the header, half hidden. The user is confused. This mistake is the second most popular on Stack Overflow.

❌ Incorrect:

$('html, body').animate({\n    scrollTop: $('#services').offset().top // The header will cover the block\n}, 800);

✅ Correct: subtract the header height

var headerHeight = $('.header').outerHeight(); // or 80\n\n$('html, body').animate({\n    scrollTop: $('#services').offset().top - headerHeight\n}, 800);

Tip: always use outerHeight() instead of height() to account for the header's padding and border. This way, scrolling to a block with jQuery will be perfectly accurate.

Mistake #3: Incorrect selector. Scroll doesn't work at all

Are you sure that $('html, body') always works? In some browsers (especially older versions of Chrome), scrollTop animation may not work on body. Or vice versa, only on html. The solution is to use both selectors at once.

❌ Incorrect (may not work in Safari):

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

✅ Correct (cross-browser):

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

This trick is an industry standard. It guarantees that scrolling to an element with jQuery will work in Chrome, Firefox, Safari, Opera, and even Internet Explorer 11.

Mistake #4: Problems with dynamic content. Scrolling to an element that hasn't loaded yet

You load data via AJAX, lazy-load images, or use an SPA (Single Page Application). The user clicks instantly, but the element hasn't appeared in the DOM yet. jQuery tries to find it, doesn't find it, and the scroll breaks.

❌ Incorrect (scroll before loading):

// User clicked, but content isn't there yet\n$('#loadMore').click(function() {\n    // ... loading data ...\n    $('html, body').animate({\n