Creating and sharing anchor URLs

Ask the community
1

I would like tGenerate a unique anchor URL to share across platforms, so when visitors click the link, they’re brought directly to the anchor on the web page, so they don’t need to scroll to find information especially that I am going to use that for the documentation webpage

I found the below article explaining how to do that in Wix Editor

https://support.wix.com/en/article/wix-editor-linking-to-anchors-on-your-site

How I can do same thing in Editor X

2

It seems like it is still a feature request for EditorX

In the meantime, this is a workaround that should work (Method using Wix Velo code):

Add this to the masterpage code of your site:

import wixLocation from 'wix-location';
$w.onReady(function () {
const anchor = wixLocation.url.split('#')[1];
anchor && $w('#'+ anchor).scrollTo();
})

And then the url structure will look like domain.com/#elementID
Element ID is the id of the element set in the code properties panel, not the name you set within the editor

3 Likes
3

Hi I’m wondering why i can’t get this work around to work…it’s not giving me the url string i’m expecting… I’m still only seeing domain.com

4

It’s worth double-checking that this has been added to the masterpage.js code file.

It won’t automatically update the site URL, but you can share links using the structure:

1 Like
5

@noahlovell

:frowning: I Still can’t get it work,

  1. I’ve put the code supplied in the Masterpage.js for sure
  2. I have given the anchored sections an #ID in the code properties.
  3. Published.
    And then I test the url plus / and the #ID, just takes me to the homepage and doesn’t scroll to that location…

Am i being a total numpty? Really appreciate your help Noah

6

:frowning: I Still can’t get it work,

  1. I’ve put the code supplied in the Masterpage.js for sure
  2. I have given the anchored sections an #ID in the code properties.
  3. Published.
    And then I test the url plus / and the #ID, just takes me to the homepage and doesn’t scroll to that location…

Am i being a total numpty? Really appreciate your help Noah

7

Scrap all other responses from me! It now works! Thank you @noahlovell

8

Super helpfull! Thank you! Only question I have is can we change the code somehow to instantly open the section without 1 second delay and smooth scroll?

2 Likes
9

This is awesome, thanks for sharing the info. I’m not sure if this helps anyone, but I felt uncomfortable with user/visitors being able to access any hashtags based on naming.

This is how I’m avoiding it. There might be a better way but this seems to work for me :slight_smile:

    const allowedAnchors = ["allowedID", "anotherAllowedID"]; // Add more as needed

    // Get the anchor from the URL
    const anchor = wixLocation.url.split('#')[1];

    // Check if the anchor is in the allowed list
    if (allowedAnchors.includes(anchor)) {
        // Scroll to the specific anchor if it's one of the allowed strings
        $w('#' + anchor).scrollTo();
    }
10

@noahlovell Great tip, this worked perfectly except for one thing… I have 2 versions of the section that I want the anchor URL for… one layer for desktop and an alternate layer (different layout) for tablet/mobile. The anchor URL works for the desktop version of the section but not for the tablet/mobile version of the section because the section #ID needs to be unique. Is there any workaround for this scenario? Otherwise, the anchor URL won’t work if someone is on a tablet or mobile or similar breakpoint. Thanks!

1 Like
11

thanks, may i know is there any way that it can brought visitor directly jump to the section? not by “auto-scrolling”?

12

Unfortunately not as far as I’m aware

13

Hi Noah, thanks for the tip with the code. It works well as long as I just add it once. I have several items on one page I want to link with an anchor-url but somehow it doesn’t work for more thank one # on one page. Do you know what the problem might be?
Many thanks, Nadine

14

This isn’t working for me, and I’m not sure why. It’s parsing correctly. Console log shows the right anchor var. It’s the scrollTo() that isn’t working at all. I can’t even scrollTo() an object id. This is a free site I’m building on, is scrollTo() only functional on paid sites??