Hey folks. Web design and css is not my day job, more of a side hobby. That said I've been working iteratively on my site for a while now, and have worked myself into a corner when trying to make the site mobile friendly.
Overall I've had pretty good luck taking a two-column dynamic layout I tracked down a few years back and adapting it to mobile. I achieved the dynamic sizing for web with some nested divs that by necessity have a greater width than the window and need to be hidden, though.
On mobile, this only works if I assign overflow-x:hidden; to html,body. If I follow proper procedure and assign it, or the website scrolling setting, to document.body instead (or any other combination therein), the smooth scrolling is broken. I like the smooth scrolling, so even though it cost me the function of tapping the time bar to move to the top of the page, I went with it. It worked, right?
I accepted this compromise until I started to go further and taking my sidebar menus and try to make them fixed position nav menus for mobile. Even that worked fine until I created a logobar that would pop in upon scrolling away from the top of the page. The same compromise that broke "tap to top" has broken any JQuery scrollTop functions I tried to include, on mobile, using a simple enough technique I found here.
Now I have the choice, make any change at all to this css and lose smooth scrolling and gain my logobar and tap to top: as seen in test page 1