Doesn;'t work properly here on my android phone, and I suspect that's becuase you have no id for #top to be targeting. Just as you have a pointless "scroll container" for who knows what.

Generally speaking you ridiculously overthought this. DIV with classes doing SECTION's job, DIV for nothing around the anchor, absolute positioning mixed with fixed, generated content for .. .uhm, I have no idea what. You're also really playing around with a lot of positioning that doesn't make any sense.

And it would be a lot prettier if you set scrolling behavior on body.

Try this on for size:

https://codepen.io/jason-knight/pen/jOzymVE

Notice how easy making it smooth scroll was, and how your hashes are supposed to be pointing at ID's. Pointing at #top without a #top existing is the same as pointing at "#" which is inconsistently handled across browsers.

Also see my cute trick for hiding the 'back to top" link under the first section? Fun stuff.

And for the love of christmas don't declare things in PX unless your intent is to tell users like myself to f*** off. It's called EM and REM, use 'em!