TweenMax ScrollTo plugin keeps resetting window position

[anthonyhonciano]

HI All,

 

Loving this plugin, it works, but it always starts back to the top and scrolls to the new position. What am I doing wrong? I tried using TweenMax.set, but that doesn't do anything. Here's my code.

 

In general, I have a dynamically created list with links. The links have top coordinates for the article on the page. The click script reads that position attribute in the anchor tag and scrolls to the new position. It's just that window will always start at zero position.

       _this = $(this);
       _position = parseInt(_this.attr("position")); //gets position attribute from clicked anchor tag
       _curPosition = $(window).scrollTop();  //get windows current position
      
       TweenMax.set(window,{
           scrollTop: _curPosition
       })
       TweenMax.to(window, 2, {
           scrollTo: {y: _position},
           ease: Power3.easeInOut
       })

[Carl]

Hi and welcome to the GreenSock forums.

 

Please add only the necessary code to a CodePen demo so that we can see the problem. 

 

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Thanks!

[GreenSock]

I'd echo Carl's request for a codepen, but I'll throw out a hunch...

 

"window" doesn't have a scrollTop like divs do, but you're trying to set() it that way. It's kinda weird how browsers do this, I know. So instead of setting window.scrollTop, use the ScrollToPlugin so that it handles all the browser quirkiness for you:

// OLD/BAD:
TweenMax.set(window,{
     scrollTop: _curPosition
});

// NEW/GOOD
TweenMax.set(window,{
     scrollTo: _curPosition
});

Does that help at all? 

[wla]

I just had this same issue. The fix for me was removing the href="#" from my triggers.

[GreenSock]

Ah yes, if your link has href="#", that tells the browser to go to the top of the current window, so that'd certainly explain why things appear to "reset" to the top. Expected behavior. As wia points out, the solution is to remove that # and just use an onclick to trigger your JS logic.