[Support request] How to realize page jump?

[Paul]

hello how are you

pls check the page link from the private information

I mean there are payge jump among 5 different areas (top quality, swiss mechanism, HUGE range, custom banding to value and serice.
https://prnt.sc/FglFwaceLUoZ
when clicking one button, it will show the content on the right.

can i use generatepressblock and element to realize the page jump ?

if yes or not, pls give me some guideline, thanks in advance.

[Leo]

Hi there,

I believe this is what you are looking for:
https://docs.generatepress.com/article/smooth-scroll/

Let me know 🙂

[Paul]

Hi Leo,

I already added the Smooth scroll

i checked the documents from you and it’s showing the section jump in one page.

https://prnt.sc/FglFwaceLUoZ – this screenshot shows the content Switch in one content secton

pls check the details in the priviate information

thanks in advance

paul

[Elvin]

Hi Paul,

Can you link us to the site you’re trying to replicate this reference site on?

To check if the proper CSS class and IDs are placed on the blocks so the links have a proper anchor to jump on.

[Paul]

hello,

I m using smooth-scroll to achieve the page jump,

but it is pity that it will cover the content when clicking the anchor.

for example: clicking the ” ABOUT” https://prnt.sc/JuCkHoYGoDF5

for example: clicking the ” CONTACT” https://prnt.sc/AhGYeFaiMeBm

pls help me to check where the problem

thanks in advance

[David]

Hi there,

to avoid that, add the ID to the Container Block instead of the Headline. Then give the Container Block some Top Padding.

[Paul]

hi david

thanks for your help and they are ok, pls check it in the private info.

but, this is also the secton jump in one page, it is not container block, and it is content page for headline, why still not jump to the right secton, pls check the screenshot and link in the priviate link

https://prnt.sc/1sISgR1tQsWa

pls give guide , thanks

i check the video and documents, still not solve this issue, sorry again for this

[Ying]

1. The HTML anchors added to these 2 headings need to be removed:
https://www.screencast.com/t/vpwanFaTEs

2. The smooth-scroll class is added to the H3 heading block currently, not the link itself, so it won’t work.
The solution here is to select the heading block, click on the 3 dot button > edit as HTML, then manually add the class after the <a tag like this:

[Paul]

Hi,

Thanks for quick update.

One more issue again here,

1/ if Deactivating sticky navigation, clicking the H2 heading anchor – Vacheron Constantin, then jump to the right h3 heading and content section, not covering them, pls check the screenshot,https://prnt.sc/svAIv3h7MVoD

2/ if activating the sticky navigation, clicking the h2 heading anchor- Vacheron Constantin, then the sticky navigation will cover the heading 3, pls check the screenshot https://prnt.sc/EmUYiGG1I2Wb

maybe when activating the sticky navigation, should add the extra css code to fix this one?
why there is the difference between deavtivating and activatin the menu navigation?
i dont find the guide documents from your documents

pls check where is the problem, how to fix this issue

thanks in advance

[Fernando]

Hi Paul,

Upon multiple tests, I found that I couldn’t replicate the issue from my end.

See: https://share.getcloudapp.com/nOuRExW2

Also see: https://share.getcloudapp.com/xQuqd20O

Also see: https://share.getcloudapp.com/nOuRExW2

I tested on different views, in different browsers, and also in incognito.

With that said, can you try clearing your browser’s cache or viewing it from a different browser and see if the issue still exists?

In any case, if it’s still occurring, we could follow David’s advice and place the h3 in a Container Block with a top-padding. Then, move the anchor to this Container Block.

See: https://share.getcloudapp.com/BluoLwKm

Also see: https://share.getcloudapp.com/xQuqd26d

Alternatively, you can place the anchor in this Element which appears before “Vacheron Constantin”: https://share.getcloudapp.com/o0uRydPn

Following Ying’s suggestion, you would need to edit the Paragraph Block as HTML and then insert id=“vacheron-constantin” there.

Example: https://share.getcloudapp.com/Wnuyzv7x

Hope this helps 🙂

[Paul]

hello
thanks for your quick update

im also using incognito browser and it is the same thing to cover the heading, pls check the screenshot https://prnt.sc/nIPXX0GPHWRb

[Fernando]

I see. If that’s the case, may you kindly proceed with the mentioned steps above?

Make sure there’s only one Block with id=“vacheron-constantin”.

Kindly let us know how it goes. 🙂

[Paul]

hi,

i followed your steps to add id=“vacheron-constantin”

screenshot 1 https://prnt.sc/dgAVKryQMTtC
screenshot 2, https://prnt.sc/kKY1SjGnaFfb

also clicking html anchor, it still cover the heading after page jump.

so, still solve this question, what happend and pls guide again

[David]

Try adding this CSS:

h2[id],
h3[id] {
    padding-top: 40px;
    margin-top: -40px;
}

This should offset the scroll position to any H2 or H2 anchors by 40px. You can increase that value if you want just make sure whatever padding is , the margin is a negative value of that.

[Paul]

hello david,

thanks for your update

1/ i should add extra css there https://prnt.sc/cVJGMIaARXZu

2/ i think that the generatepress theme has the function of smooth scroll inside the theme https://prnt.sc/c6DZ7uMkRpiq

so as long as we set this page jumpe in one page or different pages, it should not add extra css code to adjust the position whatever i use sticky navigation or not.

one more thing, if Deactivating sticky navigation, i still need the extra css code from you?

have a nice day and thanks again

[Author]

Posts