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…
Thanks for your Feedback
We’re listening to all your feedback and working super hard to make Elements the perfect website builder.
Alternatively, you can use the @media (prefers-reduced-motion: reduce) media query to disable or adjust smooth scrolling for users who prefer reduced motion.
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.
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!
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.
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?
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?
If you want to control the scroll timing (and other options such as easing) then you could use something like the Smooth Scroll js library.
Simple enough to add to your project, just put the following in your project’s template:
<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.
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.
For example, I have created a page for Adjust Smooth Scroll Speed with the information that @bon posted. When other useful solutions come up, I will create pages for them in the Solutions area.
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!
