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

51 messages · Page 1 of 1 (latest)

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
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
white arrow
# reef arrow Let me know if this work 🙂

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

https://bit.ly/3lCXoXv - Become a frontend developer (50% off limited time!)
-- Want to learn UI/UX? https://designcourse.com
-- Today, we're stepping back into the exciting world of frontend development to check out a JavaScript library called Locomotive Scroll. It allows you to do a number of things, but primarily it allows you to integrate a ...

▶ Play video
#

@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
#

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
# reef arrow no worries, is cause without having a look its hard to tell. Try to remove the f...

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
white arrow
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
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
white arrow
reef arrow
white arrow
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
#

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
#

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
#

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! 🥳 🎉