First scroll on mobile scrolls to far

[Connor-Knabe]

First of all thanks a lot for making this great plugin!

When I first load up the page (on mobile, iPhone 5s) and click on a link from the collapsed navbar(bootstrap) it will scroll to far down past the div I want to stop at. Any time I click after that it seems to work fine. I messed with the offset attempting to set it to the navbar height but this didn't seem to fix the issue.

I've looked at a bunch of other issues including #50 #63 #34 but can't seem to get mine to work properly.

I'm using StickUp (which disabling doesn't seem to fix the issue). I've used two other scroll libraries both of which seem to have the same problem so I'm very confused at what is going on.

The code is https://github.com/ClarityFloats/ClarityFloats/tree/gh-pages/flafy/js in the script.js file to init Smooth Scroll.

Hosted at http://clarityfloats.com

Thanks!

[Connor-Knabe]

I did a little more research and it looks like it is scrolling past the section by the same height as the uncollapsed navbar around 400px. This also isn't an issue if you scroll on the page first before clicking the link.

[Connor-Knabe]

I figured it out. Turns out my navbar was pushing the whole page down on load. So I added the "navbar-fixed-top" class and it fixed it!

[kswedberg]

Wow, I'm so glad you worked this out. And I'm sorry I never replied. I did see your report and I meant to respond to it, but other stuff and general procrastination got in the way. I really appreciate that you linked to your script and to the page that was showing the problem. That extra information is always very helpful. If you run into any other problems with the plugin, please let me know, and I'll try to be much more prompt in answering.

[Connor-Knabe]

So I jumped the gun. Something really odd is going on now. So it works fine until I make my window width very small <470px (don't see any media queries doing this) it could be some issue with the theme I'm using where they overwrote defaults (I couldn't find anything).

When the window is below 470px it seems to push down the body of the page (this is the issue with smooth scroll) but when it is larger than that (still has collapsed navbar) it doesn't push the page down the navbar just overlays on top of the content. Any ideas?

[kswedberg]

It looks like your navbar script is pushing down the rest of the page the first time it opens for some reason. So, because the first section of the page that isn't fixed position or navbar is <div id="newsletter">, I figure you can just set the offset option of smoothScroll based on the top offset of #newsletter. I tried it, and it seems to work for me. Something like this should do it:

  $('a[href*=#]').click(function(event) {
    event.preventDefault();
    var link = this;
    var offset = $('#newsletter').offset().top;

    $.smoothScroll({
      scrollTarget: link.hash,
      offset: -offset
    });
  });

[Connor-Knabe]

@kswedberg thank you so much this fixed it!!

[kswedberg]

@Connor-Knabe glad to hear it's working now!