Scroll to next or previous DIV on click

[ozycozy 3 Likes (Newbie)]

I am building a dynamic form/div which has a clone button on the right bottom corner. Once you click it, it should clone the .item:first and then auto scroll down so the last div will hide. and when you click on prev or next button, it should scroll to the exact div that i want. my approach by using jQuery scrollTop with fixed px but it is not effective. since we have a lot of screen size. How can I achieve this?  this is the first time i want to try Greensock to make this happen. Thanks

See the Pen mjdmWK by ozy-cozy (@ozy-cozy) on CodePen

[PointC 8,599 Likes (Superhero)]

Sounds like you're looking for the ScrollTo plugin:

https://greensock.com/docs/Plugins/ScrollToPlugin

 

That will allow you to scroll directly to an element like this:

TweenMax.to(window, 1, {scrollTo:"#yourElement"});

 

Hopefully that helps. Happy tweening.

 

[ozycozy 3 Likes (Newbie)]

2 hours ago, PointC said:

Sounds like you're looking for the ScrollTo plugin:

https://greensock.com/docs/Plugins/ScrollToPlugin

 

That will allow you to scroll directly to an element like this:

TweenMax.to(window, 1, {scrollTo:"#yourElement"});

 

Hopefully that helps. Happy tweening.

 

thanks for the response!
the thing is #yourElement here is a dynamic element which always generate new element depends on how much you click the button. is there any option on greensock that can scrollTo next #yourElement and previoys #yourElement ??? 

[PointC 8,599 Likes (Superhero)]

I'd probably use a NodeLIst which is recreated each time you clone an .item. Then use an activeItem variable to see which one is in view and scroll to the prev/next one. Maybe something like this:

 

See the Pen WKNLGX by PointC (@PointC) on CodePen

I assumed you wanted to go straight to the new div when you create it. If that's not what you wanted, you could simply remove the tween from that event handler. Hopefully this helps. Happy tweening.

 

[ozycozy 3 Likes (Newbie)]

@PointC this is exactly what i wanted!! thank you very much, well this gonna be my first try using greensock on my project. and yes it is true that everytime  i clone an .item it should go straight to that div/item.  Thanks 

[TRIPLESENSE REPLY 5 Likes (Newbie)]

Hi all,

could you please update the documentation (https://greensock.com/docs/Plugins/ScrollToPlugin), saying that scrollTo also supports DOM elements as parameters? It just lists selectors and numbers

[Carl 9,066 Likes (Superhero)]

7 hours ago, TRIPLESENSE REPLY said:

Hi all,

could you please update the documentation (https://greensock.com/docs/Plugins/ScrollToPlugin), saying that scrollTo also supports DOM elements as parameters? It just lists selectors and numbers

 

Got it. thanks.