scrollTo when coming from external link/site

[exxeraga 0 Likes (Newbie)]

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.

[Shaun Gorneau 1,503 Likes (Superhero)]

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.

[exxeraga 0 Likes (Newbie)]

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;
            });

});

 

 

[exxeraga 0 Likes (Newbie)]

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.

[Shaun Gorneau 1,503 Likes (Superhero)]

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

[exxeraga 0 Likes (Newbie)]

Sweet, thank you very much for your help!