Scrolling in CSS

You can simply make your website scroll differently with the following css properties

How to scroll?

You can link to specific ids in your webpage with a normal href. The browser will automatically scroll to the element with the id.

Smooth scrolling

The simple line will change the behaviour on the whole page

Example

1
2
3

Code

        html {
            scroll-behavior: smooth;
        }

More information

Scroll behaviour in the Mozilla docs

Scroll padding

If you have a fix navigation on top or something else, the link which you clicked can be covered. But there is a simple fix.

Example

4
5
6

Code

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

More information

Scroll behaviour in the Mozilla docs

Tricks