Jump to content
Search Community

Anchor link to end of element's position while using ScrollTrigger

dubfonik test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

I am animating the position of an element which I am also linking to with an anchor link. Since this element is triggered by scrolling to it and starts off the page, this results in a jumpy performance.

 

I understand a workaround could be to create a static container which doesn't move and link to that, but that isn't ideal in my situation. I was wondering if it's possible to link to where the element would finish, instead.

See the Pen RwGwjWO by joelklease (@joelklease) on CodePen

Link to comment
Share on other sites

Hey @dubfonik

 

I am not quite sure, I understand, what it is you are referring too.

 

When I view the pen and click on the link, the window instantly jumps to the bottom, the container somehow comes sliding in from the left and then the box comes sliding in from the right. It's like your

 

html {
    scroll-behavior: smooth;
}

 

is doing nothing.

 

Is this what you meant?

 

If so, you could use GSAP's ScrollToPlugin for animating the scroll down to the bottom - which makes it buttery smooth if you wish so.

 

See the Pen a7e1d9868b56109f3d7fdf2fc1a554dc by akapowl (@akapowl) on CodePen

 

 

If that is not what you meant, please try rephrasing or re-explaining your issue.

 

Cheers

Paul

 

  • Like 2
Link to comment
Share on other sites

4 minutes ago, akapowl said:

When I view the pen and click on the link, the window instantly jumps to the bottom

Sorry, not sure why it's doing that. I've just tweaked the original pen to show it more clearly (it didn't translate well in the embed).

 

5 minutes ago, akapowl said:

GSAP's ScrollToPlugin for animating the scroll down to the bottom

Ok thank you, I'll give that a go.

Link to comment
Share on other sites

13 minutes ago, dubfonik said:

Sorry, not sure why it's doing that. I've just tweaked the original pen to show it more clearly (it didn't translate well in the embed).

 

Just so you know, It still does that on my end - even when viewed in debug mode. ( I m on Windows 10 Home - Chrome 86.0.... atm )

 

But so do all of the demos by mozilla on this page.

https://developer.mozilla.org/de/docs/Web/CSS/scroll-behavior

 

Seems like maybe a browser bug - It's fine in Firefox.

But the issue I am seeing is that it scrolls on the x-axis as well as the y-axis.

So the ScrollToPlugin might be the go-to solution anyways for now, since it has none of those issues show.

 

Edit

Just updated to Chrome 87 - and there is still no working scroll-behavior: smooth 

 

  • Like 1
Link to comment
Share on other sites

4 minutes ago, akapowl said:

Seems like maybe a browser bug.

Interesting... it seems to work perfectly fine for me on Chrome & Firefox

 

The issue with that ScrollToPlugin method is it clashes with the scroll-behavior: smooth property, and I want to use it across all links on the website - not just ones I tag with a class.

Link to comment
Share on other sites

  • Solution

 

On 11/26/2020 at 11:58 PM, dubfonik said:

I want to use it across all links on the website - not just ones I tag with a class.

 

That was just an example. You could do that, too.

Check the stackoverflow links commented out in the JS for more info, if you like.

 

See the Pen 5dc9831f2f01a25bb79a033b60799754 by akapowl (@akapowl) on CodePen

 

 

 

  • Like 2
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.
×
×
  • Create New...