Having a little trouble with a page scroll

[Thadley]

Hey guys, I’ll start off by showing you the code:
$('.mobile-submenu a').on('click', function(e){ var targetLink = $(this).attr('href').slice(1); var target = $('.body').find('header[id=' + targetLink + ']'); var targetOffset = target.offset().top; $('html, body').animate({ scrollTop: targetOffset}, 'slow'); e.preventDefault(); });

This code works perfectly fine when my browser is 100% width or for desktop resolutions. When I start to shrink it for tablets & phones, it still works but doesn’t stop at ID that I tell it too.

The ID’s are the section titles for the site. Instead of stopping right at the title, it continues a bit farther and then stops.

Any reason why it would do this? I’m using the same code for my call to action buttons and they work perfectly fine no matter what size the browser is.

[Paulie_D]

We’d need to see it in action but it sounds like a margin/padding at lower viewport size issue.

Do you have a link?

[Thadley]

@Paulie_D Alright, give me a few minutes and ill upload it and post the link.

[Thadley]

@Paulie_D Alrighty,

Here is the current version:
Current version

[Thadley]

Strange because if you actually test it on a phone, it works but within a browser window it doesn’t? lol

[Author]

Posts