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?

See this: http://stackoverflow.com/questions/9068587/accounting-for-a-fixed-header-with-animate-scrolltop-and-target-offset-top — iazaran, Oct 15 '16 at 21:42

score 0 · Answer 1 · answered Oct 15 '16 at 21:52

0

You should add current scroll amount to element's offset().to and distract fixed header height

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

answered Oct 15 '16 at 21:52

Ashish Bhagat

409
3
16

Hi Ashish, First of all thank you for your time. I don't know what's the problem, but t – Tiago Lopes Oct 16 '16 at 08:35
but the code does not seem to work as intended. Only scrolls a small portion of the viewport. http://dev-caeoli.pantheonsite.io/ – Tiago Lopes Oct 16 '16 at 08:36

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

1 Answers1