onClick to link to ID of element

Ask the community
,
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