[Support request] How to realize page jump?

Home Forums Support [Support request] How to realize page jump?

Home Forums Support How to realize page jump?

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #2144852
    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.

    #2144858
    Leo
    Staff
    Customer Support

    Hi there,

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

    Let me know 🙂

    #2144953
    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

    #2145036
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #2145258
    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

    #2145294
    David
    Staff
    Customer Support

    Hi there,

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

    #2145661
    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

    #2145977
    Ying
    Staff
    Customer Support

    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:
    03.07.2022-13.34.42

    #2146132
    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

    #2146147
    Fernando
    Customer Support

    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 🙂

    #2146154
    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

    #2146164
    Fernando
    Customer Support

    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. 🙂

    #2146575
    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

    #2147050
    David
    Staff
    Customer Support

    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.

    #2147445
    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

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.