How to scroll to element and stop when reaches the top of viewport?

Question

I'm working on a website ( http://dev-caeoli.pantheonsite.io/ ) and I'm stuck with a jquery problem. I'm using scrollTop in the navigation of the website. I can't use anchor links because the "main" element has position fixed in the beginning to create that scroll effect.

I'm using this code, but when the scroll occurs, the element stays below the viewport.

scrollTop: $("#work").offset().top

What I want is the element to scroll to the top of the viewport. I've used the code blow to achieve that, but it only works when you are on the top of the page because it subtracts the height of the window.

scrollTop: $("#hero").offset().top-100 + window.innerHeight

Any clues of what I'm doing wrong?

Answer 1

您应该将当前滚动量添加到元素的offset（）。to并分散固定的标题高度

scrollTop: $(window).scrollTop() + $("#work").offset().top - 100