Jump to content
GreenSock

exxeraga

scrollTo when coming from external link/site

Recommended Posts

Hello everyone,

 

Posting for the first time on these forums. I just started using GSAP and i'm wondering is it possible to use scrollTo when coming from external pages? I would love to be able, after clicking on link from external page, to load my site's landing page and then scroll to desired anchor. This is working perfectly with scrollTo plugin when im using "local" links on the site, but as said not when coming from external link - it just jumps to anchor without scroll animation.

 

Any ideas would be appreciated.

 

Thanks in advance.

Link to comment
Share on other sites

This is definitely possible, but the answer would depend on how you are identifying the anchor from the URL passed. For example, if it's a fragment id, you could just 

setTimeout( function() {
  if( location.hash && $(location.hash).length > 0 ) {
    window.scrollTo(0,0);  // just to be sure we are at the top
    TweenLite( 'body' , 1 , {top: $(location.hash).offset().top } );
  }
}, 1); // I use this timeout to show the page top for a second before scrolling

I am using a bit of jQuery for calculating the anchor position cleanly (because I tend to have jQuery already in use on projects), but you can do that with vanilla JS if you're not using it.

  • Like 3
Link to comment
Share on other sites

This is what I'm currently using for scrolling between sections.

 

$(function(){       
            var wrapper = $("#wrapper"),
                $menu = $("#navLinks"),
                $window = $(window);

            $menu.on("click","a", function(){
                var $this = $(this),
                    href = $this.attr("href"),
                    topY = $(href).offset().top;
   
                TweenMax.to($window, 2, {scrollTo: {y: topY, offsetY: 50, autoKill: true}, ease:Power4.easeInOut});
                return false;
            });

});

 

 

Link to comment
Share on other sites

Ok, I managed to make it work with your advice, but i still have slight problem. After entering page from external link, page is loaded on desired anchor, then it jumps to top and then it scrolls back to said anchor.

 

Idk how to recreate this for you in codepen because it needs to be open from external link. Here is the piece of code I'm using:

$(function(){  
    var wrapper = $("#wrapper"),
        $menu = $("#navLinks"),
        $window = $(window);

    $menu.on("click","a", function(){
        var $this = $(this),
            href = $this.attr("href"),
            topY = $(href).offset().top;
   
        TweenMax.to($window, 2, {scrollTo: {y: topY, offsetY: 50, autoKill: true}, ease:Power4.easeInOut});
        return false;
        });
    
    setTimeout( function() {
        if( location.hash && $(location.hash).length > 0 ) {
            window.scrollTo(0,0);  
            TweenMax.to($(window), 2, {scrollTo: {y: $(location.hash), offsetY: 50, autoKill: true}, ease:Power4.easeInOut});
        }
    });
});

I can give you link to the live project if you want to see the said behavior.

 

Again, thank you for your time and help, i really appreciate if.

Link to comment
Share on other sites

Yeah, that's my fault. The code I posted has window.scrollTo(0,0); inside the setTimeout ... so that call is delayed. Moving it out should take care of that.

 

See the Pen qrzLBx#section-3 by sgorneau (@sgorneau) on CodePen

  • Like 2
Link to comment
Share on other sites

  • 2 weeks later...

Sweet, thank you very much 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.
×