Jump to content


Simple Scroll To

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

I'm sure I'm missing something simple, but could not get this working:  

See the Pen lDAkp by cmmize1 (@cmmize1) on CodePen


also was not sure what is required (additional js) to support ScrollToPlugin.min.js?



Link to comment
Share on other sites

Looks like you are passing the element ID with the # symbol to document.getElementById(). And for the on() method you have to pass parameters of the function as a data object through the event handlers event.data property.  Go to the jQuery on() API page and scroll down and find "Passing data to the handler".


Your click handler would look like this using the event.data property with on():

// using the data.event property in on()
// to pass parameters to a function
$(document).on( "click", "#red", {name: "red"}, scrollTo );

// to access it you would use the following
function scrollTo(event) {
    console.log(event.data.name); // outputs 'red'

But here is a working example I made of the scrollToPlugin that uses only one click handler, instead of binding mulrtiple event handlers on each element:


Basic scrollToPlugin example:

See the Pen AsLfc by jonathan (@jonathan) on CodePen


You want the to() target to be the window unless wanting to scrollTo other elements inside a div.


Hope this helps! :)

Link to comment
Share on other sites

Thanks Jonathan, my bad for hacking that out.... it's been modified but the calculation of the position needs work......  anyhow.  this is a small piece of an issue with using draggable on a mobile device.  Once you force draggable to a y only scroll you can no longer grow or shrink the display with "pinching".  This site www.diahappyhour.com is working great in chrome, ok in IE 9, and not so great on android phone or iphone.  So my plan was to just forget the draggable part for mobile devices since it's really not needed anyway.  but when i remove Draggable and throwprops libs...  the ScrollTo quits working.  Any light you can shed on this would be helpful..  or if it is a know issue with android and iphones when using draggable?  Thanks

Link to comment
Share on other sites



The calculation issue, at least in your codepen, is because you're setting the offset of each element on each click event. Set and store each element's top and left position at the first code run and then access the respective values in the click event.


As for the ScrollTo plugin not working when you remove Draggable and ThrowProps, that shouldn't happen. Please provide a reduced sample in order to take a better look.



Link to comment
Share on other sites

Really trying to get a solution for android/iphone.   Look at this site (diahapppyhour.com) on one of those devices and you'll see that resizing and behavior is an issue.  I plan on removing the draggable libs for mobile devices but didn't expect this behavior.   Is this normal?

Link to comment
Share on other sites

Yep, I saw the site on Desktop and a couple of Android devices.


Good news is that even in low end device Draggable and ThrowProps give great results, bad news is that when you zoom-in then you can't zoom-out if you're dispatching the touch event in the Draggable target.


Perhaps you could use a touch library, like Hammer JS (http://eightmedia.github.io/hammer.js/), to detect the amount of fingers in the Draggable instance, and if there's more than one, disable the instance, thus allowing the native zoom. Then when the touch event ends, enable the Draggable instance again.


In fact Hammer detects pinch-in and pinch-out, so you could disable on any of those events and on touch end enable again. That will work better with other multi-finger events.



Link to comment
Share on other sites

I found the issue: when enabling draggable on the content it generates inline css and an additional div.  It was the addition of those that (for  some unknown reason to me) makes scrollTo work.  So I just added the *div to my code that was generated and scrollTo works now without dragggable enabled. 


* added div

<div style="display: inline-block; width: 100%; padding-right: 350px; position: relative; overflow: visible; -webkit-transform: translate3d(0px, 0px, 0px);">


When I have more time I'll have to figure out whats jacked up in the css that is causing this.  

Thanks for your help

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.