Table of contents causes weird behavior on other anchor links

Attributes
1

Description

Hi, when I implement the table of contents attribute on a rich text field, it causes other buttons to behave weird. It delay’s the scroll action but the anchor links on the table of content links work properly. What could be causing this issue?

Site URL

Required: Please provide a staging/production URL where we can see the issue

Steps to Reproduce

  1. Click the “Apply now” buttons
  2. Watch the behavior
  3. Have questions
    …

Expected Behavior

Anchor links on other buttons work instantly

Actual Behavior

The anchor links are delayed.

Video/Screenshots

Required: Please provide a short screen recording showing the issue

  • Video link: Vimeo Link
  • Screenshots (if applicable): [Upload or link to screenshots]

Additional Context

  • Browser: Arc Browser (Chromium)
  • Device: Desktop

NDA Notice: If you’re under an NDA, please feel free to send us a Direct Message/Email with the above information.

2

Hey @Bart! I believe there is a conflict between scripts, Lenis and Attributes.

I’ve alerted the team and will get back to you as soon as possible.

Apologies for the inconvenience :folded_hands:

4

Hey @Bart!

I think I’ve found a solid solution — can you test this on your end and let me know how it works?

  1. Add this style to disable the browser’s native scroll behavior:
<style>
  html,
  body {
    scroll-behavior: auto !important;
  }
</style>
  1. Update your Lenis script to the following:
// This file was generated by Slater.app - lenis.js

const lenis = new Lenis({
  lerp: 0.1,
  wheelMultiplier: 0.95,
  gestureOrientation: 'vertical',
  normalizeWheel: false,
  smoothTouch: false,
});

lenis.on('scroll', (e) => {
  console.log(e);
});

lenis.on('scroll', ScrollTrigger.update);

gsap.ticker.add((time) => {
  lenis.raf(time * 1000);
});
gsap.ticker.lagSmoothing(0);

// Intercept anchor links and use Lenis to scroll
document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
  anchor.addEventListener('click', function (e) {
    const targetId = this.getAttribute('href');
    const targetEl = document.querySelector(targetId);

    if (targetEl) {
      e.preventDefault();

      // Prevent jump flash
      setTimeout(() => {
        lenis.scrollTo(targetEl, {
          offset: -100, // adjust this based on your sticky header height
        });
      }, 0);
    }
  });
});

Let me know how it goes!