CTA and Page Anchor Scrolling Down and Landing including Mobile

My client pointed out to me that Sydney isn’t scrolling to the correct place when pressing the “Learn More” button. I really had not paid attention to this fine little detail before. The scrolling is not scrolling to the point of the anchor text position exactly at the top of the primary area as you one would expect. It leaves a fraction (1/4") of the slider visible or the sticky menu overlaps the writing. Furthermore, it happens across all browser platforms and on different computers outside my network.

After going back and looking at 3 web-sites where I have used Sydney, they all exhibit the same behavior however each web-site is a little bit different. All sites should require slight adjustments of where that button scrolls to the anchor. I kind see in the JS where it’s being manually adjusted, but not sure why my change didn’t work.

I headed over to your demo page to find the exact same thing happening there. Not only that but the same issue seems to be happening on ALL your 5 buttons that let you demo Sydney in 5 different views. This is really a tough one and I am not sure if this is a design-flaw or something that can be adjusted easily without having to dig into PHP or JS. If that’s the case, that’s ok too, but tell me where to look. Maybe that was an oversight or acceptable being close enough for the software development and quality assurance teams.

I have 3 examples:



https://demo.athemes.com/themes/?theme=Sydney

I have been Googling and DuckDuckGo’ing it, checking your FAQ and code snippets, and looking at this forum and don’t see a solution.

OK folks here is my solution, please explain why you would subtract 70 from vertical position of the targeted anchor block? “- 70”??? It wasn’t showing because I had to mod the js-min file not the regular js. I removed the - 70 and everything scrolled to the top of the section correctly on all browsers and in all mobile sizes too.

  $(function() {
        $('.mainnav a[href*="#"], a.roll-button[href*="#"], .smoothscroll[href*="#"]').on('click',function (e) {
            var target = this.hash;
            var $target = $(target);

            if ( $target.length ) {
                e.preventDefault();
                $('html, body').stop().animate({
                     'scrollTop': $target.offset().top - 70
                }, 900, 'swing');
                
                if($('#mainnav-mobi').length) $('#mainnav-mobi').hide();
                return false;
            }
        });
    });

};

Hello there,

By default, the each section beneath the main slider area has quite huge padding.

To improve it’s visibility (especially on smaller device) upon scrolling triggered by the slide’s button or other anchor link, we need to subtract it by 70px.

Regards,
Kharis