Tutorial: Unique Anchor URLs.

For anyone that hasn't figured it out already, Wix doesn't offer unique anchor URLs by default. That means you have to get your hands dirty with Corvid.

Step 1. Enable Corvid

Step 2. Assign your anchors the names you will use in your code.

For our example I've given them the names ♯id-1 and ♯id-2.

Step 3. Write your code.

import wixWindow from 'wix-window';   
//imports the necessary wixWindow data 
import wixLocation from 'wix-location';  
//imports the necessary wixLocation data

$w.onReady(function () {
let query = wixLocation.query;                    
//this lets us use the query parameter ? in our URL
if (query.hasOwnProperty("point")) {       
/*we create the query suffix "point".  You can change this to whatever you want -no special characters.*/
switch (query.point) { 
case "♯id-1":                                                       /*this creates the query of  "♯id-1", which creates the anchor URL
as I stated earlier, you will use the names of your anchors instead of "♯id-1" */
wixWindow.scrollTo(0, 550);              
/*(0,550) refers to the pixel that will be in the top left corner of the screen (inside the gridlines)*/
break;
case "♯id-2":
wixWindow.scrollTo(0, 1880);
break;
default:
}
}
});
export function button1_click(event) {      
//make sure you register the button clicks in the properties panel!!
wixLocation.to("https://heathh-m.wixsite.com/unique-anchor-urls/v1?point=♯id-1");
/*redirect the user to the specified URL (this has the unfortunate effect of reloading the page, /but if we just use "/v1?point=♯id-1" it changes the URL but doesn't navigate to the anchor)*/
}
export function button2_click(event) {
wixLocation.to("https://heathh-m.wixsite.com/unique-anchor-urls/v1?point=♯id-2");
}