CSS

Smooth Scrolling Links using CSS

The default behavior of the anchor link is to auto-scroll to the container location ID specified in the href of the anchor followed by hash i.e. #. Auto-scroll means it jumps to the location id specified in the anchor link.

<header>
    <div class="sticky-nav">
        <ul>
            <li> <a href="#contact-us" class="btn btn-primary">Contact Us</a></li>
            ..
            ..
            ...
        </ul>
    </div>
</header>

<main>
    <div class="section-one">
        <div class="container">
            First section
        </div>
    </div>
    <section>
        <div class="section-two">
            Second Section
        </div>
    </section>

    <section id="contact-us">
        <div class="container">
            Contact Us Section
        </div>
    </section>
</main>

Scroll Behavior property of CSS

The scroll-behavior CSS property tells the browser way to handle scrolling triggered by anchor links. Instead of straight jumping to the location specified in the anchor links, the scroll-behavior CSS property allows to smoothly animate the scroll position.

If smooth scroll animation is only necessary inside the particular element, we can apply it to that element. Otherwise, we can apply it to the whole document.

/**
* Smooth scrolling for an element
*/
#info {
scroll-behavior: smooth;
}

/**
* Smooth scrolling for the whole page
*/
html {
scroll-behavior: smooth;
}

If we have a fixed navigation/sticky navigation and have an anchored link in the same navigation, when we scroll to the anchored link location, the title or part of the content area of that section is hidden by the sticky navigation because our contents are behind the sticky navigation. To fix this kind of issue we can use scroll-margin-top and scroll-padding-top CSS properties.

The scroll-padding-top CSS properties

We can add the scroll-padding-top CSS property to an HTML element. Let’s suppose, our sticky navigation height is 50px, and let’s set the scroll-padding-top to an Html element to be 50px. When the anchor link is clicked, the anchor will scroll to the section separated by the sticky navigation by the 10px, and the title or the content area of the section will be visible.

HTML {
    scroll-padding-top: 50px;
}
.sticky-nav {
    height: 40px;
}

The scroll-margin-top property

The scroll-margin-top property is used to set the top margin of the anchor section mentioned in the href of the anchor link.

The result of the scroll-margin-top property is the same as the scroll-padding-top. i.e. there will be a margin on the top of the scrolled section and the section will be visible and separated from the sticky navigation

The scroll-margin-top property is applied to the anchor section and this section will leave a margin of 50px.

.sticky-nav{
    height: 40px;
}
section {
    scroll-margin-top: 50px;
}

If the browser understands the media query and the user has set their preference for reduced motion, then we can make the scroll behavior auto.

html {
    scroll-behavior: smooth;
}

@media screen and (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

Note: The scroll-margin-top and scroll-padding-top properties are applied only to the scroll snapping and these properties don’t affect the actual padding of the HTML element or the margin between the anchor sections.

Views: 125

Standard