onClick to link to ID of element

Ask the community
,
1

Hello - if I have a button and want to use velo to link it to a specific element based off its ID, how would I write that code?

$w.onReady(function () {

    $w("#button1").onClick(() => {
        $w("#text123").[ this is where I get messed up ]("xxx");
    });

Thank you!

2

What exactly do you want to achieve?

What should happen, when you click onto that button ?

3

I would like it go to the element like you would do with an anchor, but without using an anchor.

4

So then do not use an anchor.
As i know, you can do the same way with every other element, like you do it with an anchor.

Take a look, normaly every element should also have…
a) onViewportEnter
b) onViewportLeave
This is what you need as triggered event.
And the second part what you will need is scrollTo.

5

Perfect! I’ll try the scrollTo function. Thank you!

6

Thank you russian-dima! The scrollTo code worked perfectly!

7

No Problem, you are welcome.

8

Hey …

You should use the button’s onClick( ) event handler to go to the needed element with the help of the scrollTo( ) method.

If the element is on the same page.

$w('#button').onClick(() => {
    const elementId = "theElementId";
    $w(elementId).scrollTo();
})

If the element is on another page:

import { session } from 'wix-storage';
import { to } from 'wix-location';

$w('#button').onClick(() => {
    const redirect = {
        page: "/contact-us",
        id: "contactForm"
    }
    
    // Save the details.
    session.setItem("itemScroll", JSON.stringify(redirect));
    
    // Go the destination page first.
    to(redirect);
})

// On the destination page
import { session } from 'wix-storage';

$w.onReady(() => {
    // Get the details from the storage
    let scroll = session.getItem("itemScroll");
    
    // Check if the element is saved or not
    if (typeof scroll === 'string') {
        // Parsing the object
        scroll = JSON.parse('scroll');
        
        // Check if there's an ID
        if (typeof scroll.id === 'string') {            
            // Check if ID is a valid selector ID
            if ($w(scroll.id)) {
                // Scroll to the element
                $w(scroll.id).scrollTo();
            }
        }
    }
})

Hope this helps~!
Ahmad

9

By the way, i just saw that everything already was given/implemented in Ahmad’s example above (in a very nice solution).