Saad Al-Sabbagh Saad Al-Sabbagh - 3 months ago 21
jQuery Question

Facing issues with smooth scroll to a div

I am facing issues where when a user clicks on a link it redirects them to a specific

div
with a specific
id
.

I'm using jQuery for the smooth scroll feature.

The issue is when I'm at the Homepage then I click on the About page it normally scrolls there, when I click back on the About link again the page moves a bit click again and it returns to normal.

You can try it out here (https://saa-d.github.io) And all of the code is here (https://github.com/saa-d/saa-d.github.io)

Thanks in advance :)

EDIT: I've tried troubleshooting using Chrome's inspection tool, and I think the problem is with the
.stick
CSS class that's responsible for sticking the navbar using JS. But I am not exactly sure what's the issue and how to fix it.

Answer

It's happening because you attach and detach the nav which causes the section to shift up and down by the height of the nav.

To avoid it use position:absolute on the nav:

nav {
    background-color: #595241;
    height: 60px;
    position: absolute;
    width: 100%;
}