How to do Anchor Tags in Scrolljacked Astro.js Site?

[white arrow]

I am using Locomotive Scroll, which creates an amazing momentum scroll but kinda messes up anchor tag smooth scrolling.

My site has a wrapper div that wraps around all of my elements save for a custom cursor shape and a navbar. This wrapper serves as the data-scroll-container for all of the elements on the page to create a killer momentum scroll.

I have a navbar full of anchor tag links that when clicked, they need to scroll down to respective sections of a specific ID.

Is there a way, when the link is clicked, to smooth scroll down to a section of a specific ID? If smooth scroll is not possible in a scrolljacked site, is there a way to teleport to the section?

[reef arrow]

I might getting this wrong, but you looking for a way to smooth scrolling to a section of the page?

[maiden lodge]

You can scroll to a specific element with an id like this:

href=“#section”

[reef arrow]

not with Locomotive? you need to use their scrollTo and set smooth: true on the wrapper quite sure as Locomotive hijack the scroll.

Basic example here:

const scroll = new LocomotiveScroll({
    el: document.querySelector('[data-scroll-container]'),
    smooth: true
});

// After initializing Locomotive Scroll, add the click event listeners to the navigation links
document.querySelectorAll('nav a').forEach(link => {
    link.addEventListener('click', function(e) {
        e.preventDefault();
        const targetId = this.getAttribute('href');
        scroll.scrollTo(targetId);
    });
});

if having a smooth scroll to a section of the page while using Locomotive is what he need than this should work.

[maiden lodge]

Ahh my bad, I’m not familiar with locomotive and assumed it would handle it automatically. Nice solution!!

[white arrow]

I'll give this a try!

[white arrow]

Yeah, I don't blame you! That would be the solution if you haven't scrolljacked the site using GSAP Smooth Scroller, smoothScrollbar.js, Locomotive Scroll, or anything like it.

Adding momentum scrolling is one way to scrolljack a site, and it tends to mess up a whole buncha crap related to the scroll position on the site!

[white arrow]

Short story, elements start randomly disappearing on screen, leaving it blank, if you try to do a regular smooth scroll solution for a scrolljacked site

[reef arrow]

Let me know if this work 🙂

[white arrow]

Hey @reef arrow @maiden lodge , the solution posted above is not working. I tried:

import LocomotiveScroll from 'locomotive-scroll';

function createScroll() {
    var scroll = new LocomotiveScroll({
        el: document.querySelector('[data-scroll-container]'),
        smooth: true,
        multiplier: 0.8,
        lerp: 0.04,
    });
    document.addEventListener('astro:before-swap', () => scroll.destroy(), { once: true });

    // Find all navlinks with the `nav-link` class on the page.
    const navlinks = document.querySelectorAll('nav-link');

    // Handle clicks on each navlink.
    navlinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const targetId = this.getAttribute('href');
            scroll.scrollTo(targetId);
        });
    });
}

createScroll();

document.addEventListener("astro:after-swap", createScroll);

The page smooth-scrolls down to the right element when I click the element, but elements are glitching in and out when I scroll and the page is now able to scroll below the footer.

Just for context, all my elements (except navbar and custom cursor) are wrapped in a wrapper <div>

The wrapper <div> uses styling from the base.css described in this video: https://youtu.be/zrM6N-G6U_M?si=jxvEYsPaW80u0gMY

@reef arrow If you can find a solution to my problem above, I'd greatly appreciate it

Momentum scroll is working perfectly but smooth scroll is not

[reef arrow]

can you create a codepen or share the repo?

[white arrow]

Can't really do that but I can share the structure of my index.astro and its styling

Gimme a little bit tho I'm in a team meeting

[reef arrow]

no worries, is cause without having a look its hard to tell.
Try to remove the function and the eventListener, so no astro:before-swap etc, just copy paste the code I gave you, adjust it to grab your navLinks and see if that works out of the box.

[white arrow]

Not a good idea to get rid of before and after swaps.

• If you remove the before-swap line, the site will attempt to create a duplicate LocomotiveScroll instance, causing locomotive-scroll.esm.min.js to error out. When switching from pages to subpages (or vice versa), the new page will be unscrollable. (I have one main page and several subpages.)
• If you remove the after-swap line, the site will not create a new LocomotiveScroll instance. Thus, when switching from pages to subpages (or vice versa), LocomotiveScroll will not work on the new page.

[white arrow]

I recommend taking a look at this post for some context on that part: https://discord.com/channels/830184174198718474/1202079508363223050
But short story, those two lines are required

[white arrow]

This code is the adaptation I made of your code. Slight changes to work with my .nav-link class

[reef arrow]

Well you seems to know what you doing than, I would remove those and see if that fix your scroll being glitchy, if it does the issue is on how you using the swap for simplifying a bit

[white arrow]

That's the thing. If you remove those two lines, then Locomotive Scroll stops working on the new site and the user has to reload every single time they go from page to subpage just to make it work, which is not user-friendly at all.

[reef arrow]

again, what Im saying is

that is for debug, remove those line, see if that works, if so, you know that your focus should be the swap, you know what I mean?

you wont deploy that to a live site cause, yes, is not what you want, but at least you have more information that you dont have about your issue

[white arrow]

Just tried that. Just like I thought, doesn't fix the issue

[white arrow]

This solution with the before and after swaps commented out is not working. It's not those two lines that are the problem--in fact, if those two lines are no longer there, then LocomotiveScroll errors out when I change pages.

[white arrow]

@reef arrow Yeah this is still happening

[reef arrow]

https://codepen.io/NinuzIBZ/pen/KKEoOpO

this is what you want right? on multiple pages I understand, correct?

[white arrow]

Almost! Just, the navbar needs to be fixed to the top even upon scrolling down

[reef arrow]

for that the nav need to be outside the data-scroll-container wrapper

if you check now the codepen it works as you want

so the issue is how you using it with ViewTransitions

[white arrow]

Yup this works. I'm getting a feeling that my glitchy behavior might have something to do with my styling. I'm going to take a look at my code and see what I come up with

Yeah I tried seeing if the beforeswap and afterswap shenanigans broke your code, inserting them into the proper locations. It didn't, so your demo works with those lines inserted in too. I think it's definitely in my styling. I'm going to add that category to this post.

[white arrow]

Hey Ninuz, I partially fixed the issue! Turns out, for each of my main div sections I was adding data-scroll-section to each of those sections.

I was fishing through your codepen to see if there was anything different, and sure enough, you'd added data-scroll-container to your wrapper but not data-scroll-section for every single section.

Short story, I've now fixed the bug of elements randomly glitching in and out, but I still haven't fixed the issue of the page being able to scroll past the footer when I click on the nav links.

The page scrolls to the correct elements, but it does this by moving the actual html page down which means it's as if the wrapper went up past the top of the page, allowing me to later momentum scroll past the bottom of the page.

[white arrow]

Hey @reef arrow @maiden lodge I figured out my current problem--when I click on the navbar links, the code is trying to scroll the whole html body down instead of just scrolling down on the wrapper I think

[white arrow]

Short story, I still have a problem... D;

[white arrow]

I just checked, it's most likely a problem with my styling. I'm going to try and re-implement this project without Bootstrap just in case to see if that fixes the problem

Hey @storm sentinel I'm so sorry! I accidentally pinged the wrong Bryce

[white arrow]

Hey @reef arrow @maiden lodge I found a working example! https://github.com/locomotivemtl/locomotive-scroll/issues/175#second

The whole crux behind my problem is that I was using GSAP and LocomotiveScroll. I forgot to call update() on ScrollTrigger whenever I scrolled using LocomotiveScroll. The result was a very buggy interaction because each library was visualizing scroll position in a different way

Thus, there was a disconnect between where GSAP (and I think also the DOM) thought I was on the page, versus where LocomotiveScroll knew I was on the page

I adapted the solution to my needs (didn't just copy paste the code from the solution), and got a beautiful result where anchor links are now working, AND I still have momentum scrolling! Woohoo!

Feel free to check the above solution out if you ever get stuck!

[maiden lodge]

Awesome! I'm glad you were able to find a solution! 🥳 🎉