• Resolved alexia123

    (@alexia123)


    Hello everyone ??

    First, thanks for this wonderful plugin, we really appreciate the work here!

    We are trying to use anchor links like explained here:
    https://greensock.com/docs/v3/Plugins/ScrollToPlugin

    We used this code :

    document.querySelectorAll(".anchor-links .elementor-column").forEach((btn, index) => {
      btn.addEventListener("click", () => {
        gsap.to(window, {duration: 1, scrollTo:{y:"#section1" + (index + 1), offsetY:70}});
      });
    });

    When we click on the “links”, we have this error:
    Failed to execute ‘scrollTo’ on ‘Window’: The provided value is not of type ‘ScrollToOptions’.

    Links are:
    01. Expertise
    02. Start your journey
    03. Pricing

    Thanks guys for your help

    • This topic was modified 3 years, 5 months ago by alexia123.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Contributor Oooh Boi

    (@ooohboi)

    Is that all the code you use or it’s pulled out of context?
    In general, you can’t use any of the available libraries (GSAP, ScrollTo, ScrollTrigger, etc.) unless you check for availability. The quickest way to do that is to check if the DOMContentLoaded

    For example…

    ;( function() {
    
        document.addEventListener( 'DOMContentLoaded', my_stuff );
        function my_stuff() {
            // do your code
        }
      
    } )();

    Does that make sense?

    Thread Starter alexia123

    (@alexia123)

    Thanks for the fast reply ??
    I’m completly noob about all of this… Yes this is the only code I added.

    I understand that we need to know if it’s available to asking if the DOM loaded it.
    So in my case here, if I want to have anchors links :

    ;( function() {
        document.addEventListener( 'DOMContentLoaded', anchor_links );
        function anchor_links() {
            

    document.querySelectorAll(“.anchor-links .elementor-column”).forEach((btn, index) => {
    btn.addEventListener(“click”, () => {
    gsap.to(window, {duration: 1, scrollTo:{y:”#section1″ + (index + 1), offsetY:70}});
    });
    });`
    }
    } )();`

    Is that correct?
    I’m really lost here.

    Thread Starter alexia123

    (@alexia123)

    Anyone can help ? ??

    Plugin Contributor Oooh Boi

    (@ooohboi)

    Oh sht, sorry buddy, I just forgot…

    ;( function() {
    
        document.addEventListener( 'DOMContentLoaded', my_stuff );
        function my_stuff() {
            document.querySelectorAll( ".anchor-links .elementor-column" ).forEach( ( btn, index ) => {
                btn.addEventListener( "click", () => {
                  gsap.to( window, { duration: 1, scrollTo: { y: "#section1" + ( index + 1 ), offsetY:70 } } );
                } );
            } );
        }
      
    } )();

    …tho, I can’t be responsible for the functionality of the code that YOU provided but in general that should be it.

    Thread Starter alexia123

    (@alexia123)

    Thank you ??

    I have to say that I followed your video https://www.youtube.com/watch?v=dG2uumcwX7s&t=660s&ab_channel=OoohBoi
    It’s very useful, thank you so much!

    If you have a patreon/tippy I would gladly make a donation,
    Have a nice week

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Anchor links with ScrollTo not working’ is closed to new replies.