# Dev Diary Ep50 - Anchor Support

**URL:** <https://forums.realmacsoftware.com/t/dev-diary-ep50-anchor-support/45412>\
**Category:** Elements\
**Created:** [November 26, 2024, 4:07pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep50-anchor-support/45412 "2024-11-26T16:07:21Z")\
**Posts on this page:** 20\
**Page:** 1

<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:** [November 26, 2024, 4:07pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep50-anchor-support/45412/1 "2024-11-26T16:07:21Z")

</div>

Hello again,

We’ve had a busy week working on MANY things, adding features, and fixing bugs. One much requested feature was anchors… and I’m pleased to say that Elements Beta 22 (due any minute now) will have full anchor support!

Watch the video to learn more about this awesome new feature, and stay till the end for a quick word about forms…

[![](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/2/7/275bdccc2a13a6aafcf3c0be667df8a297253b94.jpeg "Dev Diary Ep50 — Anchor Support") ](https://www.youtube.com/watch?v=pxNd206UYaY)

## Thanks for your Feedback

We’re listening to all your feedback and working super hard to make Elements the perfect website builder.

Lots more great stuff to come!

See you soon,  
Dan & Team Realmac.

---

<div class="post-metadata">

**Author:** ![thominator](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/thominator/32/35233_2.png) [@thominator](https://forums.realmacsoftware.com/u/thominator)\
**Post date:** [November 26, 2024, 4:35pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep50-anchor-support/45412/2 "2024-11-26T16:35:57Z")

</div>

Nicely done. It’s going to make me think a bit about how I use components, but that’s okay. This is a very elegant solution.

---

<div class="post-metadata">

**Author:** ![sbchasin](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/sbchasin/32/26943_2.png) [@sbchasin](https://forums.realmacsoftware.com/u/sbchasin)\
**Post date:** [November 26, 2024, 4:51pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep50-anchor-support/45412/3 "2024-11-26T16:51:58Z")

</div>

I like how you have done this. Looks great!!

---

<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:** [November 26, 2024, 5:41pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep50-anchor-support/45412/4 "2024-11-26T17:41:36Z")

</div>

Thanks, was extra work to get it right, but totally worth it!

---

<div class="post-metadata">

**Author:** ![Bill](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bill/32/107_2.png) [@Bill](https://forums.realmacsoftware.com/u/Bill)\
**Post date:** [November 26, 2024, 5:56pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep50-anchor-support/45412/5 "2024-11-26T17:56:53Z")

</div>

- What about a timing option?, seems a bit fast for my taste.
- How will this be handled in regards to prefers reduced motion?

---

<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:** [November 26, 2024, 6:10pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep50-anchor-support/45412/6 "2024-11-26T18:10:32Z")

</div>

@Bill this is all standard web stuff…

> [@Bill](#):
>
> What about a timing option?, seems a bit fast for my taste.

No, Tailwind itself does not directly control the timing of the scroll. The **scroll speed in smooth scrolling is controlled by the browser**.

> [@Bill](#):
>
> How will this be handled in regards to prefers reduced motion?

If you don’t want smooth-scroll on your website, you can remove the class from the Site Template file.

 ![CleanShot 2024-11-26 at 6 .02.00@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/b/0/b047a28cc885add9a646926ba6316b88c75bfa86.jpeg)

Alternatively, you can use the @media (prefers-reduced-motion: reduce) media query to disable or adjust smooth scrolling for users who prefer reduced motion.

```auto
html {
  scroll-behavior: smooth; /* Default smooth scroll */
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto; /* Disable smooth scrolling */
  }
}

```

This is a guiding light for Elements — Everything should be as open and configurable as possible ☺

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [November 26, 2024, 6:54pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep50-anchor-support/45412/7 "2024-11-26T18:54:00Z")

</div>

This looks fantastic, well done.

I would like to point out that you can also use anchors by using a URL for the link with the form `#anchor-name`. When I first got the BETA I could not intuitively figure out how to use the popup (hadn’t watched the video yet) so I did it this way and it works flawlessly.

There is one more feature I would request that you consider for anchors and that is the ability to set an OFFSET. Why is this important? Because many times you have an anchor set on a component and when you activate it the browser scrolls up and the component is hidden under the navbar. By setting an offest you can ensure that the anchor is always visible when scrolled. Not essential to use anchors successfully but it does add a little polish to a site.

I have to say that your solution is great for cross page anchors, so easy to use. Fantastic.

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [November 26, 2024, 9:34pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep50-anchor-support/45412/9 "2024-11-26T21:34:27Z")

</div>

> [@handshaper](#):
>
> There is one more feature I would request that you consider for anchors and that is the ability to set an OFFSET

You can use the scroll padding and scroll margin CSS properties for this.

We don’t have controls on any component for those properties, but you can add the tailwind utility class to the Advanced-\>CSS Classes box. Use `scroll-pt-6` to add 24px scroll padding to the top of your component.

Doing so should add the offset you’re looking for!

See the tailwind docs for more info and examples on scroll padding/margin: [Scroll Padding - Tailwind CSS](https://tailwindcss.com/docs/scroll-padding)

---

<div class="post-metadata">

**Author:** ![Flash](https://avatars.discourse-cdn.com/v4/letter/f/f475e1/32.png) [@Flash](https://forums.realmacsoftware.com/u/Flash)\
**Post date:** [November 26, 2024, 10:37pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep50-anchor-support/45412/10 "2024-11-26T22:37:24Z")

</div>

Anchor! Perfect! Enough said 😃

Forms. Yes! Yes! Yes! Can’t wait to see the rabbit you pull out of the hat!

Thank you for listening! I know it’s been tough and frustrating. But so so so so worth it to us!

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [November 26, 2024, 11:20pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep50-anchor-support/45412/11 "2024-11-26T23:20:22Z")

</div>

Yes, that is an excellent suggestion and is an elegant way to solve this problem when it arises. I’ll give it a test run right now as I have a situation where I need some padding.

Mahalo!

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [November 26, 2024, 11:33pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep50-anchor-support/45412/12 "2024-11-26T23:33:46Z")

</div>

> [@ben](#):
>
> You can use the scroll padding and scroll margin CSS properties for this.
> 
> We don’t have controls on any component for those properties, but you can add the tailwind utility class to the Advanced-\>CSS Classes box. Use `scroll-pt-6` to add 24px scroll padding to the top of your component.

So I gave this a spin and nothing happens. The anchor srolls to the exact same location whether the `scroll-pt-6` is present or not. Possibly because I didn’t enter the class correctly in the custom CSS field. I have tried on numerous occasion to add classes to this field and never got it to work. Is there anything special with how the class is entered?

---

<div class="post-metadata">

**Author:** ![Bruno](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bruno/32/25457_2.png) [@Bruno](https://forums.realmacsoftware.com/u/Bruno)\
**Post date:** [November 27, 2024, 5:30am UTC](https://forums.realmacsoftware.com/t/dev-diary-ep50-anchor-support/45412/13 "2024-11-27T05:30:59Z")

</div>

Hi @dan  
Tailwind cannot directly control the speed or animation of a smooth scroll as it only provides the scroll-smooth utility for enabling smooth scrolling. However, you can use a simple JavaScript script with window.scrollTo to control the speed and animation duration of the scroll. Before I try and to avoid wasting time for nothing: is there an impossibility to use such a script with Elements?

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [November 27, 2024, 8:00am UTC](https://forums.realmacsoftware.com/t/dev-diary-ep50-anchor-support/45412/14 "2024-11-27T08:00:21Z")

</div>

This works for me scroll offset

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [November 27, 2024, 8:24am UTC](https://forums.realmacsoftware.com/t/dev-diary-ep50-anchor-support/45412/15 "2024-11-27T08:24:45Z")

</div>

> [@Bill](#):
>
> What about a timing option?,

If you want to control the scroll timing (and other options such as easing) then you could use something like the [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll) js library.

Simple enough to add to your project, just put the following in your project’s template:

```auto
<script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll@15/dist/smooth-scroll.polyfills.min.js"></script>

var scroll = new SmoothScroll('a[href*="#"]', {
	speed: 300
});

```

Note the `speed` option in the docs say this:

> [speed] is a number representing the amount of time in milliseconds that it should take to scroll 1000px. Scroll distances shorter than that will take less time, and scroll distances longer than that will take more time. The default is 300ms.

Hope that help 🙂

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [November 27, 2024, 9:14am UTC](https://forums.realmacsoftware.com/t/dev-diary-ep50-anchor-support/45412/16 "2024-11-27T09:14:57Z")

</div>

@ben

works I set the speed slow for affect

---

<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:** [November 27, 2024, 10:56am UTC](https://forums.realmacsoftware.com/t/dev-diary-ep50-anchor-support/45412/17 "2024-11-27T10:56:36Z")

</div>

A lot of great information is being shared on the Forum, so I’m thinking it would be good to move some of this to the [Elements Manual](https://docs.realmacsoftware.com/elements-docs).

For example, I have created a page for [Adjust Smooth Scroll Speed](https://docs.realmacsoftware.com/elements-docs/elements-app/solutions/adjust-smooth-scroll-speed) with the information that @ben posted. When other useful solutions come up, I will create pages for them in the [Solutions area.](https://docs.realmacsoftware.com/elements-docs/elements-app/solutions)

Let me know if you spot any other items here on the forum that you think should be in the Manual, and I’ll get them moved over!

---

<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:** [November 27, 2024, 10:57am UTC](https://forums.realmacsoftware.com/t/dev-diary-ep50-anchor-support/45412/18 "2024-11-27T10:57:28Z")

</div>

> [@handshaper](#):
>
> So I gave this a spin and nothing happens. The anchor srolls to the exact same location whether the `scroll-pt-6` is present or not. Possibly because I didn’t enter the class correctly in the custom CSS field.

Hmm, will chat to @ben about this and see if we can figure out what’s going on!

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [November 27, 2024, 12:00pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep50-anchor-support/45412/19 "2024-11-27T12:00:50Z")

</div>

scroll-mt-24. Works for me

---

<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:** [November 27, 2024, 12:11pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep50-anchor-support/45412/20 "2024-11-27T12:11:03Z")

</div>

Ah yes, of course 🤦

`scroll-pt-24` is setting the padding (inside the component). You need/should use `scroll-mt-24` to set the margin outside of the item.

I just tested this and can confirm it works here 👍

You can also use an arbitrary value like this `scroll-mt-[300px]` if you want to set an exact pixel amount.

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [November 27, 2024, 6:32pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep50-anchor-support/45412/21 "2024-11-27T18:32:03Z")

</div>

> [@dan](#):
>
> `scroll-mt-24`

I did not use this I used `scroll-pt-6`, I tried the `scroll-mt-24` and it works perfectly. Thanks.

I’m a happy camper now.

[Next page](https://forums.realmacsoftware.com/t/dev-diary-ep50-anchor-support/45412.md?page=2)