Jump to content
GreenSock

TrulyNewbie

Scroll to different page

Go to solution Solved by GreenSock,

Recommended Posts

Hi, I don't think it's possible to create a CodePen.

 I have a smoother scroll enabled, and When I click a link e.g (Ruby.com/about#me), it scrolls to the anchor, but the page is messed up. You can't scroll to the top (it's cut off), it doesn't load at the top of the anchor (loads half way down), and theres a huge gap at the bottom. 

I've tried to use scrollTrigger.update/refresh but to no avail.

 

Thanks again!

 

function getSamePageAnchor (link) {
  if (
    link.protocol !== window.location.protocol ||
    link.host !== window.location.host ||
    link.pathname !== window.location.pathname ||
    link.search !== window.location.search
  ) {
    return false; 
  }

  return link.hash; 
}

// Scroll to a given hash, preventing the event given if there is one
function scrollToHash(hash, e) {
  const elem = hash ? document.querySelector(hash) : false;
  if(elem) {
    if(e) e.preventDefault();
  // Scroll to the element in the URL's hash on load
 gsap.to(window, {scrollTo: elem}); 
  }
    
}

// If a link's href is within the current page, scroll to it instead
document.querySelectorAll('a[href]').forEach(a => {
  a.addEventListener('click', e => {
    scrollToHash(getSamePageAnchor(a), e), console.log("click and scrolled");
  });
});

// Scroll to the element in the URL's hash on load
scrollToHash(window.location.hash); 

 

Link to comment
Share on other sites

Hi @TrulyNewbie. It's virtually impossible for us to troubleshoot blind - could you please provide a minimal demo in CodeSandbox or CodePen? It doesn't need to be your actual project - literally just a few colored <div> elements is fine. 

 

Also, please make sure you've got the latest version of ScrollTrigger (3.10.3 right now). There was a regression in a recent patch that might have caused the problem you were describing but again, it's hard to know without seeing the issue in context. 

Link to comment
Share on other sites

43 minutes ago, GreenSock said:

Hi @TrulyNewbie. It's virtually impossible for us to troubleshoot blind - could you please provide a minimal demo in CodeSandbox or CodePen? It doesn't need to be your actual project - literally just a few colored <div> elements is fine. 

 

Also, please make sure you've got the latest version of ScrollTrigger (3.10.3 right now). There was a regression in a recent patch that might have caused the problem you were describing but again, it's hard to know without seeing the issue in context. 

Sorry about that, I thought because the link was external it might be pointless to show.

 

So when I click "internal" It scrolls down, but when I click "external" on my Wordpress site, I have the issues mentioned above.

See the Pen gOoQrLx by NewbieRuby (@NewbieRuby) on CodePen

 

Link to comment
Share on other sites

Hi, thanks for your help, I've tried the codes but it doesn't fix the issue.

 

The page loads at the top of the anchor, but I cant scroll above it, and beneath it is the footer and a huge gap

Link to comment
Share on other sites

5 minutes ago, TrulyNewbie said:

Hi, thanks for your help, I've tried the codes but it doesn't fix the issue.

 

The page loads at the top of the anchor, but I cant scroll above it, and beneath it is the footer and a huge gap

I don't understand - how can I reproduce the issue in your demo? It'd doing exactly what I'd expect. I must be missing something obvious 🤷‍♂️

 

How can I see the huge gap? How can I see where it won't scroll above it? 

Link to comment
Share on other sites

That's what I was trying to explain. The demo couldn't show the issue, because the issue only appears when you click a link to scroll to a section on another page.

E.g You are on this page: https://new.com/ and then you click a button that brings you to - https://new.com/about#approach

But when you load in you can't scroll to the top (it's cut off), it doesn't load at the top of the anchor (loads half way down), and theres a huge gap at the bottom

Link to comment
Share on other sites

1 hour ago, OSUblake said:

We really can't help without a minimal demo. You can use CodeSandbox to show the issue. Just fork this and add another page and your code.

 

https://codesandbox.io/s/reverent-vaughan-5pw6zt?file=/main.js

I've never made a sandbox before! Thanks for showing me

https://codesandbox.io/s/nice-kapitsa-e0uodo?file=/index.html

So this is work exactly like how I mentioned. When you click the external button, on the about page, theres a huge gap at the bottom, and you cant scroll to the top of the page to see the text. It also doesnt load at the top of div #

 

Thanks again

Link to comment
Share on other sites

Aha! Thanks for the minimal demo - now I see the issue. 

 

The way you're handling things is causing the browser to actually scroll the #smooth-wrapper element (which has overflow: hidden), offsetting everything visually. I'll add code to the next release to FORCE the wrapper's scrollTop back to 0 whenever you .refresh() as a convenience but for now you can simply: 

ScrollTrigger.refresh();
document.querySelector("#smooth-wrapper").scrollTop = 0;

Does that resolve things for you? 

Link to comment
Share on other sites

Thanks for your help, but unfortunately that doesn't work on my site or on the demo

Link to comment
Share on other sites

  • Solution

Your demo was breaking because you don't have ScrollToPlugin loaded/registered - check your Dev Tools console (you'll see errors). 

 

You applied the code in the wrong place too.

 

Here's what seems to be working for me: 

https://codesandbox.io/s/dreamy-germain-qczk9c?file=/main.js

 

Right? 

  • Like 1
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.
×