Stories

Easy Way to Fix Anchor Links Scrolling Too Far

Fixed navbar is a very popular way of displaying navigation when a page is scrolled, but you could run into a small detail that needs to be addressed.

November 9, 2022

css sticky anchors

Easy Way to Fix Anchor Links Scrolling Too Far

The solution might be easier than you think. Thanks to scroll-margin-top and scroll-padding-top, we can fix this issue with a single line of CSS code.

.anchor {
	scroll-padding-top: 50px;
}

Related Content

How to Avoid Page Flickering When Scrollbars are Dynamically Shown or Hidden?

Stories

How to Avoid Page Flickering When Scrollbars are Dynamically Shown or Hidden?

There are certain cases when you want to dynamically manipulate the page height which will result in flickering.

Changing the Mouse Cursor in CSS With the cursor Property

Stories

Changing the Mouse Cursor in CSS With the cursor Property

Using CSS to change the cursor on your website is a great way to add a little bit of personality to your site.

How to Create a Pure CSS Gradient Background Animation

Stories

How to Create a Pure CSS Gradient Background Animation

CSS animations are a growing trend in web design, and they're also fairly easy to create.