Jump to content
Search Community

Failed to execute "scrollTo" on "Window"

ADawn test
Moderator Tag

Go to solution Solved by Carl,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

The ScrollTo plugin has been working perfectly with exactly the same code for the last 4 or 5 months as I developed this website. However, shortly after deployment (on the same hosting provider), I am getting the error "Uncaught TypeError: Failed to execute 'scrollTo' on 'Window': 2 arguments required, but only 0 present."

 

As evidenced by the included screenshot of the page source, the plugin is successfully loading on the page, and the one line of JS that is calling the plugin on this page looks like this.

solutionsTl.to($(window), .8, { scrollTo: {y: scroll}, ease: Circ.easeOut}, "-=.5");

I have tried adding an x value and trying a different target, as well as rearranging my header in various ways to include scripts in a different order, but nothing is working.

 

All of the threads I can find both here and on Stack Overflow are resolved with the answer that they need to include the ScrollTo plugin. However, I would like to stress that the ScrollTo plugin has been successfully loaded, and this code was working perfectly for a period of 4 to 5 months after finishing this section of the JavaScript.

 

I am at a loss. Any help would be much appreciated.

post-34911-0-40262400-1474495239_thumb.png

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

Sorry to hear you are experiencing problems. I'm as perplexed as you are as to why code that was running perfectly for months starts acting differently without anything changing. Is it possible you are loading any themes or plugins that may be causing a conflict?

 

Is it failing in all browsers? if not, which ones?

 

Its really tough to diagnose without at least seeing the page this is happening on. Can you share a link? Preferably to a reduced test case that only has enough code and assets to replicate the problem. 

 

We're happy to help, just need more info.

  • Like 2
Link to comment
Share on other sites

Sounds like it isn't being loaded. What happens when you log this out?

console.log(com.greensock.plugins.ScrollToPlugin.version); // -> 1.8.0

If that logs a version number out, it's loading correctly. From there I would try it without wrapping the window in jQuery.

solutionsTl.to(window, .8, { scrollTo: {y: scroll}, ease: Circ.easeOut}, "-=.5");

If that works, check how you're loading jQuery. You might also want to try putting your scripts at the bottom of your page, right before the closing </body> tag instead of in the head. The only time I put scripts in the head is if I'm using a framework like Angular, where it has to run before anything can be displayed.

  • Like 3
Link to comment
Share on other sites

...Is it possible you are loading any themes or plugins that may be causing a conflict?...

 

 

This was the problem. A plugin called Go Pricing is interfering with the ScrollTo plugin somehow. I can't believe I failed to perform such a basic troubleshooting step. The page source shows that the jQuery is still loading before any of the other scripts. Is the interference something to do with a non-jQuery later function definition that is overriding ScrollTo? It is happening on all browsers and on every page that has ScrollTo on it.

 

This is the page:

http://decographic.staging.wpengine.com/solutions/

 

 

Sounds like it isn't being loaded. What happens when you log this out?

console.log(com.greensock.plugins.ScrollToPlugin.version); // -> 1.8.0

If that logs a version number out, it's loading correctly. From there I would try it without wrapping the window in jQuery.

solutionsTl.to(window, .8, { scrollTo: {y: scroll}, ease: Circ.easeOut}, "-=.5");

If that works, check how you're loading jQuery. You might also want to try putting your scripts at the bottom of your page, right before the closing </body> tag instead of in the head. The only time I put scripts in the head is if I'm using a framework like Angular, where it has to run before anything can be displayed.

 

This happens when I am logged out and logged in. After running the log you suggested, I got "cannot read property 'version' of undefined" while the offending plugin was active and the version number when it was not. I am also putting all my custom scripts at the bottom of the page, and have tried putting the libraries in the footer as well, with no change. I have tried the changes you suggested to that line of code, too, with no results. In light of this, the fact that my files are enqueued correctly, and the fact that the proper script tag consistently shows up in the "view page source" output, what could be causing ScrollTo to appear to not exist when in fact it does?

 

Thank you so much for your answers. I'm grateful for everyone's help :).

Link to comment
Share on other sites

  • 5 months later...
Hello All,

 

I am using latest version of Tweenlite and Tweenmax library but scroll-to parameters are not working.I am calling element id in Y parameter and offsetY with numbers but both are not working  also no any errors prompted in console.

 

Please suggest whats else over there below is code which I am using ->

 

TweenLite.to(window, 2, {scrollTo:{y: div_id, offsetY:50000}});

 

TweenMax.to(window, 2, {scrollTo:{y: div_id, offsetY:50000}});

div_id not working

Offsety: not working

 

 

complete code snippets->

 

 

var anchor_nav = document.querySelector('.snap__subnav');

 

anchor_nav.addEventListener('click', function(e) {

    var target = e.target,

    href     = target.getAttribute('href');

    id     = target.getAttribute('id'); 

    div_id1=href.replace("subnav_","subnav_anchor_");

    div_id=div_id1.replace("#",'.')+'_widget'; 

 

  if(href !== null && id !== null) { 

    if(href.length > 0) {

      e.preventDefault();

      callTrigger(href,div_id);

 e.preventDefault();

      if(window.history && window.history.pushState) {

        history.pushState("", document.title, href);

      }

    }

  }

});

 

 

function callTrigger(target,div_id){

    console.log(com.greensock.plugins.ScrollToPlugin.version); 

        

   TweenMax.to(window, 2, {scrollTo:{y: div_id, offsetY:50000}});

 

}

 

 

 

Looking forward for your best solution asap.

 

 

Thanks & Regards,

Karamveer Singh
Link to comment
Share on other sites

Welcome to the forums.

 

Did you make sure to load ScrollToPlugin? 

 

It'd be super helpful if you could provide a reduced test case in codepen or something so that we can see what's happening. 

 

Also, it's typically best to start your own thread when you have a new question instead of putting it at the bottom of an existing one - it just keeps things cleaner. 

 

Thanks :)

  • Like 4
Link to comment
Share on other sites

  • 1 month later...

It seems that plugin (or another) is loading TweenMax version 1.11.2 and that can't be good.

 

 

http://prntscr.com/clljrk

 

Try replacing that with 1.19.0

 

I thought I would give some closure to this thread, though it is older. The Go To plugin was loading the wrong version of TweenMax and it was interfering with the function of the scrollTo plugin despite having the correct version of TweenMax loaded later.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...