Home Forums Community Forum Anchor links not work in the same page

Only users with a registered purchase of Avada can post to the community forum. Please register your purchase here.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • Marco
    Participant
    Post count: 8

    Hi guys,
    I have a problem. I want add internal links from “page A” to “page A”.
    I set into “Content box” a relative link, then I add anchor link to container (first) but this not work, after I try to add anchor link with “Menu anchor element” but this not work.
    In both cases there was no scroll and the display point was always in the middle of the information.
    Can you help me to understand what I’m still doing wrong?

    Thanks

    marklchaves
    Participant
    Post count: 404

    Do you have a link?

    Marco
    Participant
    Post count: 8

    The website is under costruction.

    I have tried both, relative (e.g. #about) and absolute link (e.g. https://www…/#about) from the “source” and I add only word “about” to the landing’s link

    annetteott
    Participant
    Post count: 6

    Hi. I had this problem, too. I will try to explain my solution.

    At the top of the page, say you want to have a menu of different options people can click on, such as Service, Support, Staffing. Naturally, you would create the following containers:

    Menu
    Service
    Support
    Staffing

    But, if you want to have links, you need to create containers above each one, like this:

    Menu Anchor
    Menu
    Service Anchor
    Service
    Support Anchor
    Support
    Staffing Anchor
    Staffing

    In the anchor containers, you would add a Menu Anchor option through Fusion Builder. When you click to open it, you will assign the anchor a specific name, like “menu”, “service” “support” or “staffing”.

    Then, in Menu, you would list out the sections:

    Service
    Support
    Staffing

    And add links to each section according to your scheme (e.g., https://myurl.com/page/#service).

    If you want to give them the ability to return to the menu again, at the bottom of each section, you would include a link to Menu (e.g., https://myurl.com/page/#menu).

    I did this by creating a code block section within each Menu section (e.g., Service, Support, Staffing):

    &#10531

    The code there makes a little arrow that I found (I preferred not use words).

    Hope you are able to understand and replicate it on your site!

    annetteott
    Participant
    Post count: 6

    I noticed the link didn’t work. I tried to put in inside a comment, but even that, it didn’t like. I don’t know how people share code without the code being executed.

    left_bracket a href equals_sign double_quote URL.com/page/#menu double_quote right_bracket &#10531 a (close)

    I hope this makes sense to you.

    marklchaves
    Participant
    Post count: 404

    Hi Everyone,

    If you are using a Fusion Builder element like the Text Block Element, then set the CSS ID to the name of the target. The CSS ID will be in the element options towards the bottom after the text area.

    E.g. of a name of the target.

    
    section-1
    

    Then, somewhere in the same page, create a link that will jump to the Text Block with ID section-1.

    E.g.

    Manually adding the code would look like this.

    
    <a href="#section-1">Go to Section 1</a>
    
    

    If you insert a link using the Fusion Builder editor (WordPress link icon), add #section-1 to the URL input field.

    You can view a live demo of plain HTML links to sections of the same page here

    Demo

    https://s.codepen.io/marklchaves/debug/PoYaWzv/xJMjOnELjzRr

    Source Code

    https://codepen.io/marklchaves/pen/PoYaWzv

    References

    https://theme-fusion.com/documentation/fusion-builder/elements/text-block-element/

    https://en.support.wordpress.com/links/

    Hope that helps! 🙂

    Marco
    Participant
    Post count: 8

    Thanks to everyone for your help,

    unfortunately I was not able to solve my problem, but I made an experiment: in a new page I imported a avada demo page with internal link (https://avada.theme-fusion.com/salon), then I added a new voice on main menu with relative link to demo page and this work perfectly (position and scroll); after, I inserted inside this page with a text block the same relative link and this doesn’t work (wrong position and not scroll).
    Why? 🙁

    Any help, even moral support, will be welcome 🙂
    Marco

    Marco
    Participant
    Post count: 8

    Hi to everyone,

    I’m going crazy with this problem.
    If you go to https://avada.theme-fusion.com/salon there is the same problem as mine. When cilck on “contact” menu’s voice, the link is great (scroll and position), but when you click on “Book Appointment” button there isn’t scroll and position is wrong.

    Someone know why?
    Thanks,
    Marco.

    Marco
    Participant
    Post count: 8

    Hi guys,
    good news, it’s very easy… just add class fusion-menu to content boxes and all works great !!!

    marklchaves
    Participant
    Post count: 404

    Hi Marco,

    Correct. Here’s the official doc.

    https://theme-fusion.com/documentation/avada/pages/anchor-scrolling/

    Enjoy!

    marklchaves
    Participant
    Post count: 404
    marklchaves
    Participant
    Post count: 404

    Continuing this thread.

    I recently posted a fairly elegant solution for fixing anchor jumps that are hidden under a fixed header. I.e. you click on a link that goes to a CSS ID; the landing is correct, but the content is hidden under a fixed header.

    I’ve manually hacked solutions before using padding and margins. I found this solution works a ton better. And, it’s only four lines of CSS.

    
    /* From Adrian Garner on Stack Overflow */
    /* https://stackoverflow.com/questions/4086107/fixed-page-header-overlaps-in-page-anchors */
    :target::before {
        content: "";
        display: block;
        height: 162px; /* Fixed header height for this page. */
        /* margin: -100px 0 0; Negative fixed header height if needed. */
    }
    
    

    Live demo https://marklchaves.com/jump-for-it/

Viewing 12 posts - 1 through 12 (of 12 total)
Only users with a registered purchase of Avada can post to the community forum. Please register your purchase here.