Interesting that this only works sometimes.
If I log off (the page is “members only”) then go to the URL with included anchor, I’m prompted to log in. That’s good.
When I complete the login I go to the correct page but I do NOT scroll to the anchor until I either refresh the page or hit enter in the address bar of the browser. That’s bad - defeats the purpose of the anchor in the URL.
Anybody have a clue why that is? What I can do about it?
It’s simply because logging in doesn’t force a page refresh - and this method only works on page load.
Thanks for the explanation.
Is there a viable alternative?
The help documents say that I should click on an anchor, choose settings, and then choose “anchor URL” to get a direct URL for that anchor but the last part is not an option presented in my web site editor - hence this attempt.
Even if the option described in the help (see below) did work, would the log in process stop processing of the “scroll to anchor” activity?
Help screenshot
My site’s screen shot of the same process.
The vital part is missing.
Correct - even with the URL from the editor, it wouldn’t work after login without a small amount of code.
When you’ve enabled Dev Mode (at the top of the editor), select the anchor and change it’s ID to something that you want (e.g. memberStories).
You’ll use this ID in your URL - https://mysite.com/#memberStories
Then you’ll need some code like this in the masterPage.js file, which basically runs on login, checks if the URL has the hash, and then scrolls to that element.
import * as wixSiteLocation from '@wix/site-location';
import { onLogin } from "@wix/authentication";
$w.onReady(function () {
onLogin(async () => {
console.log("Member logged in");
// 1. Get the full URL string
const fullUrl = await wixSiteLocation.location.url();
// 2. Check if the URL contains a '#'
if (fullUrl.includes('#')) {
// Split the string at '#' and take the part after it
const targetId = fullUrl.split('#')[1];
const targetElement = $w(`#${targetId}`);
if (targetElement) {
targetElement.scrollTo()
.then(() => {
console.log(`Scrolled to ${targetId}`);
})
.catch((err) => {
console.error("Scroll failed", err);
});
} else {
console.warn(`No element found with ID: ${targetId}`);
}
}
});
});
Not winning with this one. I can see that code executed but none of the “console.log” statements produce an entry in the wix log (I’m guessing they’re popping up on a server somewhere rather than in my client?").
I’ve tried using both the anchor’s name and the “comp-mmk455wg” tag extracted using the “inspect” option in Edge to view the code. I can manually enter the comp version and scroll to the page but, while the code executes, it doesn’t trigger a scroll-to-anchor.
Baffled!
For the code above to work, you need to use the ID set, not from the live site.
In the example above, you can see the screenshot with the anchor selected. Below that, there’s “Properties & Events” in the code panel. Where the ID is #anchor1 - that’s the ID you need to use