# Link & Anchor in Menu component?

**URL:** <https://forums.realmacsoftware.com/t/link-anchor-in-menu-component/47207>\
**Category:** Elements\
**Created:** [April 17, 2025, 6:09pm UTC](https://forums.realmacsoftware.com/t/link-anchor-in-menu-component/47207 "2025-04-17T18:09:34Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![miketee](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/miketee/32/27560_2.png) [@miketee](https://forums.realmacsoftware.com/u/miketee)\
**Post date:** [April 17, 2025, 6:09pm UTC](https://forums.realmacsoftware.com/t/link-anchor-in-menu-component/47207/1 "2025-04-17T18:09:34Z")

</div>

So many dev diaries…so many releases! This is a crazy (but fun) ride!

Sorry if I missed it, but is there (or will there be) a way to have links (to anchors) in the menu component? Obvious main reason being a one-page site.

Thanks, and keep up the great work @dan and the Elements team!

---

<div class="post-metadata">

**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\
**Post date:** [April 17, 2025, 8:32pm UTC](https://forums.realmacsoftware.com/t/link-anchor-in-menu-component/47207/2 "2025-04-17T20:32:35Z")

</div>

@miketee You can already do this with the “link pages”. Hope the graphic below makes sense :

 ![CleanShot 2025-04-17 at 9 .29.34@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/c/e/cef59bf239fb3331429eec543783644112e350fd.jpeg)

---

<div class="post-metadata">

**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\
**Post date:** [April 17, 2025, 8:41pm UTC](https://forums.realmacsoftware.com/t/link-anchor-in-menu-component/47207/3 "2025-04-17T20:41:23Z")

</div>

If you want to get fancy, you can control the speed the links scroll to there targets adding this to the page \> body end.

```auto
<script>
  function smoothScrollTo(target, duration = 1500) {
    const targetPosition = target.getBoundingClientRect().top + window.scrollY;
    const startPosition = window.scrollY;
    const distance = targetPosition - startPosition;
    const startTime = performance.now();

    function animation(currentTime) {
      const timeElapsed = currentTime - startTime;
      const progress = Math.min(timeElapsed / duration, 1);

      // easeInOutQuad easing
      const easedProgress = progress < 0.5
        ? 2 * progress * progress
        : -1 + (4 - 2 * progress) * progress;

      window.scrollTo(0, startPosition + distance * easedProgress);

      if (timeElapsed < duration) {
        requestAnimationFrame(animation);
      }
    }

    requestAnimationFrame(animation);
  }

  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
      e.preventDefault();
      const target = document.querySelector(this.getAttribute('href'));
      if (target) {
        smoothScrollTo(target, 1500); // duration in ms (e.g., 1500 = 1.5 seconds)
      }
    });
  });
</script>

```

---

<div class="post-metadata">

**Author:** ![miketee](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/miketee/32/27560_2.png) [@miketee](https://forums.realmacsoftware.com/u/miketee)\
**Post date:** [April 17, 2025, 8:55pm UTC](https://forums.realmacsoftware.com/t/link-anchor-in-menu-component/47207/4 "2025-04-17T20:55:50Z")

</div>

Thanks! I suspected it was something like above.

That said…it would be nice to have some of this functionality baked right into the Menu component, no? 😉

---

<div class="post-metadata">

**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\
**Post date:** [April 17, 2025, 9:01pm UTC](https://forums.realmacsoftware.com/t/link-anchor-in-menu-component/47207/5 "2025-04-17T21:01:19Z")

</div>

> [@miketee](#):
>
> That said…it would be nice to have some of this functionality baked right into the Menu component, no? 😉

The basic functionality (forgetting the extra JS,) is pretty well baked in as is. And by default you do get a smooth scroll to the target without any extra JS. That was just me pushing the boundaries.

---

<div class="post-metadata">

**Author:** ![miketee](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/miketee/32/27560_2.png) [@miketee](https://forums.realmacsoftware.com/u/miketee)\
**Post date:** [April 17, 2025, 9:59pm UTC](https://forums.realmacsoftware.com/t/link-anchor-in-menu-component/47207/6 "2025-04-17T21:59:12Z")

</div>

Yeah…as one of the “non-devs” in here, I’m probably missing a lot! 😛

I’d TOTALLY welcome a pre-built menu component designed for one-page sites!

Thanks again for chiming in and sharing some tips 🙂

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [April 19, 2025, 11:52am UTC](https://forums.realmacsoftware.com/t/link-anchor-in-menu-component/47207/7 "2025-04-19T11:52:43Z")

</div>

> [@miketee](#):
>
> I’d TOTALLY welcome a pre-built menu component designed for one-page sites!

Templates will help with this — We’ll be providing dozens of pre-built collections of components for all kinds of site layouts (including menus). Stay tuned for that soon!

---

<div class="post-metadata">

**Author:** ![miketee](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/miketee/32/27560_2.png) [@miketee](https://forums.realmacsoftware.com/u/miketee)\
**Post date:** [April 19, 2025, 12:21pm UTC](https://forums.realmacsoftware.com/t/link-anchor-in-menu-component/47207/8 "2025-04-19T12:21:19Z")

</div>

I figured as much! Thanks @dan !