This time, we’re introducing a magical technique using CSS to make anchor link movements within a webpage smoother. In the world of coding, small improvements often make a big difference. By reading this article, your webpage will become more polished.
Previously, we introduced JavaScript and jQuery-based methods like “How to smoothly scroll to the top of the page with an anchor link click” and “jquery.page-scroller: Easily enable smooth scrolling for anchor links”, but this method can be done simply using only CSS without any JavaScript, which is great.
CSS Technique for Smooth Anchor Navigation
Let’s start by looking at the core part of this technique. By using the scroll-behavior property in CSS, scrolling to the linked position within the page becomes smooth. This simple approach greatly improves user experience and gives a professional impression to your website.
<style>
html{
scroll-behavior: smooth;
}
body{
padding: 0;
margin: 0;
text-align:center;
}
a{
font-size: 18px;
}
h1{
line-height:1.6em;
text-align:center;
font-weight:bold;
padding: 15px 0 30px 0;
font-size: 18px;
}
.area{
width: 100%;
height: 1500px;
font-size: 40px;
font-weight: bold;
line-height: 1500px;
}
#a1{
background-color: #99CCFF;
}
#a2{
background-color: #FFFFBF;
}
#a3{
background-color: #CFFFBF;
}
</style>
This code applies to the html element and affects the scrolling behavior of the entire page. Just writing “scroll-behavior: smooth;” in the html tag is enough. Note that applying this to the body tag has no effect. We’ve prepared anchor areas (.area, #a1, #a2, #a3) for demonstration.
The code introduced here can be easily integrated into any website.
Implementation Example and Design Ideas
Seeing the actual code helps deepen understanding. Here, we use a simple HTML structure to show how you can leverage this CSS property.
Anchor movement areas within the page (class=”area”, id=”a1″ to id=”a3″) have been prepared.
<h1>Smooth Anchor Scrolling Using Only CSS (scroll-behavior: smooth)</h1>
<a href="#a1">Jump to AREA1↓</a> <a href="#a2">Jump to AREA2↓</a> <a href="#a3">Jump to AREA3↓</a>
<br>
<br>
<br>
<div class="area" id="a1">AREA1</div>
<div class="area" id="a2">AREA2</div>
<div class="area" id="a3">AREA3</div>
This HTML code allows users to move smoothly between different sections within the page. From a design perspective, this behavior is especially effective on long pages surrounded by a lot of content. Using visually appealing separators or background colors can also help attract user interest.
Demo Page: Smooth Anchor Navigation Using Only CSS (scroll-behavior: smooth)
A live demo page is available. Please check the link below to experience the smooth scrolling behavior.
Demo: Smooth Anchor Navigation Using Only CSS (scroll-behavior: smooth)
Conclusion
In this article, we introduced a simple yet effective technique using the CSS scroll-behavior property. This small change can significantly enhance the user experience on your website. If you’re interested in more technical details or advanced customization, please check out other articles on our blog. We hope this small piece of magic makes your website even more appealing!
*Note: Fine-tuning like easing and speed adjustments is not possible.
*If you reuse the code, please do so at your own risk.
Please do not reuse the Google Analytics tag included in the head tag of the demo page.
