Anchors not showing in drop down

Ask the community
,
1

Question:
Hey guys! I’ve seen this topic pop up at least twice but no one shared the solution. I have a page im building where i’ve added anchors to multiple sections. When i go to the button to link to the anchor, my only option in the drop down for “Which Anchor on this page?” is Top of Page. I’ve tried everything i can think of. This is a product page that I’m working on btw. I’ll take any help you can offer. Thanks in advance!

Product:
Wix Studio

What are you trying to achieve:
Trying to have a link move to anchor point further down site page.

What have you already tried:
I’ve tried multiple forum posts, none have the solution, but a couple have found one.

Additional information:
[Include any other pertinent details or information that might be helpful for people to know when trying to answer your question.]

2

Currently you cant link to an anchor in the product page (not sure why)
To do this you would need to use code.

$w.onReady(function () {
    $w('#scrollButton').onClick(() => {
        $w('#productSection').scrollTo().then(() => {
            console.log("Scroll complete!");
        }).catch((err) => {
            console.error("Scroll failed:", err);
        });
    });
});
3

Dan thanks so much! Where would I insert that code? Thanks again, you’re giving me hope.

4

in the page code for the product page. You may need to turn Dev mode on.
If you have never coded before then there are plenty of tutorials to learn how.
If you get stuck reach out and I’ll help you sort it.

5

I think I placed it in the correct spot… What does this do for me now though?

Screen Shot 2024-12-11 at 10.55.16 PM
Screen Shot 2024-12-11 at 10.55.16 PM1468×1050 156 KB

6

Dan as a sidenote, the text links in that screenshot will point to 3 different locations on the page. Again man, thanks for your help on this.

7

you need to make sure the id of the button and the section macthes the code, or change the code to match the id of the elements.

see how they are underlined in red. this means there is an error.

$w.onReady(function () {
    $w('#text1').onClick(() => {
        $w('#section1').scrollTo().then(() => {
            console.log("Scrolled to Section 1");
        }).catch((err) => {
            console.error("Scroll to Section 1 failed:", err);
        });
    });

    $w('#text2').onClick(() => {
        $w('#section2').scrollTo().then(() => {
            console.log("Scrolled to Section 2");
        }).catch((err) => {
            console.error("Scroll to Section 2 failed:", err);
        });
    });

    $w('#text3').onClick(() => {
        $w('#section3').scrollTo().then(() => {
            console.log("Scrolled to Section 3");
        }).catch((err) => {
            console.error("Scroll to Section 3 failed:", err);
        });
    });
});
8

You’re my friggen hero. Thanks so much! Working perfectly!

1 Like
9

No worries, glad you got it working.

1 Like
10

One quick question, I’m getting this error in the console…
TypeError: $w(…).onClick is not a function

Is this a concern?

11

What line is the error on ?

12

The error is on Line 33.

13

Figured it out Dan, it was because there was no “text3”. Thanks again!

1 Like