[Resolved] On click jump to Location not working on first Load

[Ian]

Hi,

Kindly check the problem in the video https://www.screencast.com/t/ccYoOq1zqtaS , as you can see when the site loads and we click on the menu link (i.e. news ) it jumps to the news section but below the News title(the title doesn’t show in the first go) but after that the titles starts showing. Tried to trace the issue but cannot see what is wrong, the only problem i can see is

style=”background-position-y: 0px;” when click first time

style=”background-position-y: 177.5px;” when click afterwards.

website is password protected, kindly let me know how to provide the access.

Pls can you check if this .

Best wishes,
Ian Mitchell

[David]

Hi there,

you can send your account login via the Accounts Issue form here:

https://generatepress.com/contact/

Please add the URL of this topic to the form.

[Tom]

The username/password you sent don’t seem to be working.

How are you achieving the smooth scroll right now? The smooth scroll option in GP (Customize > General) takes the sticky nav into account when scrolling to prevent this kind of thing.

[Tom]

Just took a look, and it’s what I suspected. The first click that happens is when your navigation isn’t sticky yet, so your smooth scroll script doesn’t take the navigation height into account.

Once it’s already sticky, the issue goes away.

You can try using our smooth scroll script, but I’m not sure if it will conflict with the smooth scroll script you already have: https://docs.generatepress.com/article/smooth-scroll/

[Ian]

hmm no that has not worked, i have tried your custom scroll snipped in the theme functions.php file with the smooth scroll option turned on in the general section of the theme, then turned off the scroll option in the general theme section and tried , also added the smooth-scroll class to my menu items as well but nothing worked.

[Tom]

What function did you add?

So turning on smooth scroll and adding the smooth-scroll class to your menu items didn’t do anything?

It’s possible that the existing smooth scroll script is overwriting the GP one, unfortunately.

[Ian]

i added the below function mentioned in your link https://docs.generatepress.com/article/smooth-scroll/

add_filter( ‘generate_smooth_scroll_duration’, ‘tu_smooth_scroll_duration’ );
function tu_smooth_scroll_duration() {
return 800; // milliseconds
}

tried different values for milliseconds and yes turning on smooth scroll and the class smooth-scroll didn’t helped

[Ian]

ok upgraded everything (wordpress, generatepress, elementor etc) , pls can you check the flickering now, smooth scroll is still enabled and also from the news page http://mastsnrigging.staging.wpengine.com/customer-review-standing-riggng-replacement/ when i click on any of them menu item it should land at the anchor i.e. http://mastsnrigging.staging.wpengine.com/#news instead of going down, tried different things but issue is still not resolving

kindly check the video as well https://www.screencast.com/t/Euw7EfniJy

[David]

Sorry i can’t access that URL anymore – its not accepting the login you supplied. Has this changed?

To note – if you’re using Elementor on the page then it uses its own Smooth-scroll, which cannot be disabled and clashes with the GP smooth-scroll ( its what causes the jerkiness of the scroll ). The way to get around this with Elementor is to move the anchorlink to the Section, and increase the section top padding to consider the height of the sticky header.

[Ian]

so if i turn off the smooth scroll option in generate press customize->general tab the jerk goes away but the problem of jumping over the anchor link on first load is still there, any suggestions?and definitely if we remove the sticky header option from elementor the problem goes away but we do need sticky header .

[David]

Did you find a solution? It looks to be jumping to the right place now. Let me know

[Ian]

Hello David,

Yes as i mentioned in the previous post that if i turn off the smooth scroll from generatepress customization general section then the jerkiness goes away as well as the anchor load ok but then i have to access the anchor tags(i.e. the Menu links from other pages as well, like if i am on http://mastsnrigging.staging.wpengine.com/customer-review-standing-riggng-replacement/ and if i click on the News or Spars or Rigging element then it should load the correct Anchor point instead of jumping over that. Kindly check the video https://www.screencast.com/t/NIHHDl0m

[David]

The problem is the jump to another page link doesn’t know that the sticky navigation is present.
Personally i would design the section to consider the sticky navigation.

So move the anchor #ID to the Elementor Section as opposed to the heading and then add top padding to that Section. The top padding being the same as the height of your sticky header.

[Ian]

Solved the problem by adding the below css

#idname {
display: block;
content: ” “;
margin-top: -150px;
height: 150px;
visibility: hidden;
pointer-events: none;
}

[David]

That’s great – thanks for sharing your solution.

[Author]

Posts