Creating and sharing anchor URLs

Ask the community
1

I want to generate a unique anchor URL to share across platforms. When visitors click the link, they’ll be brought directly to the section on the web page. This was a simple ask in Editor, but there seems to be a lot of hoop-jumping in Studio.

2

You can use wixLocation.query and $w.Element.scrollTo

import wixLocation from 'wix-location-frontend'

const anchor = wixLocation.query['anchor']
if (anchor) $w('#' + anchor).scrollTo()

This should scroll to whatever element is defined within the anchor URL query:
https://example.com/page?anchor=element
Will scroll to #element

1 Like
3

Hi, Jessica_Plant1 !!

The article I read before might help solve the problem! :wink:

4

Forgive me, @DeanAyalon I’m a noob when it comes to code. Whereabouts would I put this?

5

Hello my friend! We meet again :slight_smile: I will check this article out.

6

@onemoretime I went into the layers, changed the section (Element ID) name to, for example, “SEO,” and then tested the URL, for example, “www.domain.ca/solutions/seo-strategy#seo-website-audit,” but it doesn’t target the “anchored” section.

7

Right there in the page code
If you don’t have it enabled, you can do so by clicking “Dev Mode” on the top bar

You can see a working demo on https://yaron-ayalon.wixsite.com/tests/demo-anchor?anchor=...:
anchor empty
anchor=img
anchor=vectorImage

On load, the page scrolls to the selected element

8

Hey Jessica :smiley:, it’s been a while! I’m glad to have made one more friend! :grin: I believe the method I shared should work as well, but I think it might be better to adopt DeanAyalon’s method since it’s simpler. This method has been introduced before by a Wix community manager, so it’s a well-established general solution to this problem.

By the way, the reason the link “www.domain.ca/solutions/seo-strategy#seo-website-audit” isn’t working is that you’re using the ID from the Wix Editor. What you should be setting, as mentioned in the article, is the section ID you can view when you “inspect” the HTML in the browser (for example: comp-k9n6tp65bg). If manually inspecting the live site every time is a hassle, DeanAyalon’s method is more reliable.

Let’s also look forward to Wix Studio Editor getting the same anchor-linked URL generation feature as Wix Editor! :wink: :+1: