Home Forums Community Forum Problem with anchor links on Avada buttons

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • wvick
    Participant
    Post count: 10

    I’ve encountered a rather strange behavior when using anchor links on Avada buttons.

    I’ve got a page which accepts a parameter “cc” (a country code). For example:
    http://www.mysite.com/mypage/?cc=us

    At the bottom of the page, I have a “Contact Us” section which has been given the anchor contact.

    At the top of the page, I want to have links which take the user down to the Contact Us section. I’m therefore simply using a link to #contact. This works fine for some text with a hyperlink to #contact, but when I use an Avada button, things go wrong…

    When pressing the Avada button, instead of going to:
    http://www.mysite.com/mypage/?cc=us#contact
    it directs briefly to:
    http://www.mysite.com/mypage/#_contact
    and then redirects to:
    http://www.mysite.com/mypage/#contact

    The dropping of the “cc” parameter causes a loss of context and a problem for me.

    I can’t put the full URL on the button because it’s a global library element and relies on the fact that a #anchor can always be found later on the page.

    Is this an Avada bug or unexpected browser behavior? And, more importantly, is there a workaround?!

    /W

    wvick
    Participant
    Post count: 10

    After some further experimentation, I think this is a bug in Avada, or at least an undesirable side effect on how Avada buttons have been implemented.

    In summary, it appears that internal or “page jump” anchor links on Avada buttons don’t work properly. They cause a page refresh, rather than a page scroll, and parameters are lost in the process.

    My workaround for this is to use a HTML <button> tag with some custom CSS styling to make it look like an Avada button. Not exactly an elegant solution, but it’s a solution for now.


    @ThemeFusion
    – I hope you’ll fix this issue. It’s easy to reproduce.

    1) Create a page with a container including a button at the top. Make the button link point to “#end”.
    2) Artificially lengthen the page, perhaps with a series of images + separators.
    3) Finally, add a container with, say, a text block “This is the #end” and make the id “end”.

    View the page, hit the button and you’ll see a reload+scroll rather than just a scroll.

    Load the page with a random GET parameter on the URL “…/?hello=world”. Hit the button and see the parameter get lost due to the reload.

    Simple and <button> tags work as expected.

    /W

    visuelle
    Participant
    Post count: 1

    I have exactly the same problem. @ThemeFusion please fix this.

    avadaduke
    Participant
    Post count: 1

    I have the same issue when using anchor links in Avada buttons and images. Please resolve the bug.

    KimUitslag
    Participant
    Post count: 1

    I’ve got the same issue when using anchor links in Avada buttons.

    MCAA
    Participant
    Post count: 1

    Same issue but with the menu items

    mulpha_webdev
    Participant
    Post count: 1

    Hi guys,

    I am facing the same issue.

    Wondering, if @ThemeFusion development team has found and fixed the issue or someone got an alternative?

    Thanks

    andrew.f8
    Participant
    Post count: 3

    I had the same issue, however I solved it by url encoding the anchor and placing a “?” before it.

    Example:

    Original link “/wp-content/2022/01/file.pdf#page=31”, this ended up as “/#_page=31”

    New link that works “/wp-content/2022/01/file.pdf?%23page%3D31”

    Hope someone finds this useful.

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