Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
celli

Simple ScrollTo

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 am trying to do a simple scrollTo from the link at the top... any idea why this is not working from my codePen ?

See the Pen pvrWjj by celli (@celli) on CodePen

Link to post
Share on other sites

You were just tweening the wrong thing. I think you meant:

TweenLite.to(window, 1, {scrollTo:{y:$("#top").offset().top}});

Your tween was literally just tweening the #top div itself to its own maximum value (like if it had a bunch of content inside of it, scroll to its bottom). 

  • Like 3
Link to post
Share on other sites

yes, these all helped. You guys are the best!!

Link to post
Share on other sites

Hi Guys,

 

I've run into a little challenge with the scrollToPlugin. Since I am changing heights of some of my DIVs through scrollMagic as we scroll, I think I need a bit of a conditional statement within my code to scroll to the correct positions.

 

My code works every time I am scrolling DOWNWARD in direction like this

TweenLite.to(window, 1, {scrollTo:{y:$("#nav2").offset().top+156}, ease:Expo.easeOut})

But when I am past that position the heights have changed and I need to now use this, to scroll the page UPWARD

TweenLite.to(window, 1, {scrollTo:{y:$("#nav2").offset().top-134}, ease:Expo.easeOut})

Is there a best way I can use an 'if else' statement to check if I am already past the '#nav2' position ? I think this will solve this little problem, but I am unsure exactly how to write that code.

Link to post
Share on other sites

Maybe you can take a look at this codePen. It is a little messy because we are missing a bunch of images -- but that shouldn't really matter for the demo. The only JS that we need to pay attention to is the // nav scrollTo items at the top of the JS. 

If you CLICK on the "visionaries" nav item, and then the "work" item, and make note of the position that it scrolls to. Then CLICK the "about" item, and then back to the "work" item again and now take note of it's position again. The position for "work" is different depending on whether I scroll from below the anchor or below it.

 

I also notice that because the rows stack and expand it is not scrolling to the same positions as the browser width changes. And if I click on 'Visionaries' and then 'global' and then 'global' again, I am able to click 'global' TWICE to reach my final scroll position, which also appears strange.

See the Pen PwOKaK by celli (@celli) on CodePen



There's got to be an easy fix that I am missing here!

Link to post
Share on other sites

It looks like I figured it out! I had some code with ScrollMagic that I guess was interfering. I took it all apart and one-by one removed functions and identified the culprit :)

Link to post
Share on other sites
  • 5 years later...

Hi

I'm trying the scrollTo plugin, awesome, just a detail, when it triggered it adds an hash (#) at the end of the URL, like www.mysite.com/page#

How can avoid this?

 

Second and last one, I'm trying to use it with class instead of id and it seems to work, is this correct or is recommended to use id? 

gsap.to(window, { duration: 1, scrollTo: ".section--overview", ease: "power4.inOut" });

 

Thanks

Link to post
Share on other sites
2 hours ago, Black Ducas said:

when it triggered it adds an hash (#) at the end of the URL, like www.mysite.com/page#

How can avoid this?

The same way you'd avoid it without the ScrollToPlugin - intercept the click callback for all of those sorts of links and .preventDefault() on the event passed into the callback :) 

 

3 hours ago, Black Ducas said:

I'm trying to use it with class instead of id and it seems to work, is this correct or is recommended to use id? 

The downside of using a class is if the ScrollToPlugin isn't loaded the link wouldn't jump to the section. That's a rare case so you don't have to worry much about it, but other than that there shouldn't be a difference.

  • Like 1
Link to post
Share on other sites

Thanks @ZachSaucier for clarify.

 

Just one thing: I noticed that clicking the link when page isn't at top it doesn't scroll starting from that point but it abruptly jump to the top (without animation) and then animate the scroll down. Is it normal?

 

Here my code:

 

    if (this.shopCtaBtns) {
      this.shopCtaBtns.forEach(element => {
        element.addEventListener('click', (e) => {
          gsap.to(window, { duration: 1, scrollTo: "#section-overview", ease: "power4.inOut" });
        })
      })
    }

 

Link to post
Share on other sites
Just now, Black Ducas said:

Is it normal?

No, it should scroll from the scroll position. Can you please make a minimal demo of the issue?

Link to post
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.

×