Are you creating a single-page website that has a smooth scroll feature?
And when the user clicks on the navigation link your page scroll to the respective section. But some of the parts of your section go behind the header that hides the important contents of your section?
Problem:
Solution:
You can easily set top offset if you are using javascript but if you don’t want to use javascript, you can now do the same without javascript also.
Today we’ll learn how to add a top offset when any section of your page scroll to the top when the user clicks on the respective link.
All you need to add this css for your Html tag
html {
scroll-behavior: smooth; /* this will add smooth scroll feature */
scroll-padding-top: 80px; /* this will set offset from top, value should be similar to header height*/
}
Let’s use this CSS feature to see how it works.
Preview:
See the Pen
Smooth page scroll with top offset with CSS only by SLICEmyPAGE (@slicemypage)
on CodePen.
Html:
<header>
<a href="https://www.slicemypage.com" class="logo">SLICEmyPAGE</a>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="home">
<h3>Home</h3>
</section>
<section id="about">
<h3>About</h3>
<p>Aliquam sapien massa, ornare imperdiet cursus varius, bibendum fermentum felis. Sed quis dui at urna posuere tincidunt. Maecenas at nisi in justo sagittis laoreet et sed urna. Ut efficitur ultricies risus, et commodo nibh pellentesque a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pretium semper tellus. Mauris dui urna, dapibus sed velit in, imperdiet egestas massa. Maecenas molestie porta lectus non congue. In vestibulum condimentum scelerisque.</p>
<p>Etiam ultrices enim ut nisl laoreet, at ultricies eros efficitur. Sed nec mauris pharetra nisl semper lacinia. Sed venenatis lectus ipsum. Nulla facilisi. Quisque aliquam rhoncus ex, ac dictum orci ullamcorper in. In hac habitasse platea dictumst. Nunc elementum auctor metus eu varius. Aliquam eu turpis ut augue sagittis aliquet. Mauris laoreet sem sed elit pharetra, a blandit dui interdum. Aliquam mollis luctus fringilla. Sed in tempor tortor. Phasellus placerat augue at enim molestie placerat. Quisque in sodales risus. Cras quis nisi varius, tincidunt enim non, interdum ipsum. Vivamus iaculis, nunc sit amet aliquet auctor, massa sapien vulputate turpis, non viverra nisl est eu diam.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent blandit elementum viverra. Phasellus et quam eu dolor laoreet tincidunt ut gravida odio. Duis ultricies, turpis quis dapibus sagittis, elit nulla dignissim urna, quis luctus velit ipsum ut risus. Nam tempor viverra risus eget accumsan. Integer porta tempus accumsan. Mauris dictum varius magna, eget luctus ligula vestibulum at. Etiam ex justo, lacinia a sollicitudin non, cursus in augue. Praesent augue lacus, ullamcorper vel mi non, blandit pretium tellus. Fusce blandit nunc eget elit porttitor lacinia. Cras justo justo, convallis non lorem sit amet, venenatis porttitor odio. Cras ac malesuada magna. Cras laoreet egestas eros in elementum. Donec tempor porttitor tortor nec feugiat. Integer feugiat orci pharetra condimentum egestas.</p>
<p>Vivamus aliquam mi ac scelerisque commodo. Vestibulum vel nisi ut ex ultrices ornare. Phasellus et turpis quis arcu viverra placerat. Donec id nibh condimentum, sollicitudin libero ut, pulvinar magna. Nunc id sapien luctus elit scelerisque placerat facilisis et justo. Suspendisse potenti. Ut auctor, nisi non tempus finibus, odio eros elementum augue, lobortis porttitor nunc tellus eget justo. Aenean sollicitudin, justo non hendrerit ornare, sapien orci lacinia massa, ut vestibulum mauris elit blandit dui. Sed ultrices est sed diam ullamcorper placerat sit amet sit amet nunc. In faucibus posuere faucibus. In neque velit, vestibulum eget augue id, euismod scelerisque sem. Aenean viverra orci risus, in varius sem commodo sed. Suspendisse elit turpis, dapibus vitae bibendum et, viverra ac leo. Nullam blandit felis lorem, in laoreet eros faucibus posuere.</p>
</section>
<section id="services">
<h3>Services</h3>
<p>Aliquam sapien massa, ornare imperdiet cursus varius, bibendum fermentum felis. Sed quis dui at urna posuere tincidunt. Maecenas at nisi in justo sagittis laoreet et sed urna. Ut efficitur ultricies risus, et commodo nibh pellentesque a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pretium semper tellus. Mauris dui urna, dapibus sed velit in, imperdiet egestas massa. Maecenas molestie porta lectus non congue. In vestibulum condimentum scelerisque.</p>
<p>Etiam ultrices enim ut nisl laoreet, at ultricies eros efficitur. Sed nec mauris pharetra nisl semper lacinia. Sed venenatis lectus ipsum. Nulla facilisi. Quisque aliquam rhoncus ex, ac dictum orci ullamcorper in. In hac habitasse platea dictumst. Nunc elementum auctor metus eu varius. Aliquam eu turpis ut augue sagittis aliquet. Mauris laoreet sem sed elit pharetra, a blandit dui interdum. Aliquam mollis luctus fringilla. Sed in tempor tortor. Phasellus placerat augue at enim molestie placerat. Quisque in sodales risus. Cras quis nisi varius, tincidunt enim non, interdum ipsum. Vivamus iaculis, nunc sit amet aliquet auctor, massa sapien vulputate turpis, non viverra nisl est eu diam.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent blandit elementum viverra. Phasellus et quam eu dolor laoreet tincidunt ut gravida odio. Duis ultricies, turpis quis dapibus sagittis, elit nulla dignissim urna, quis luctus velit ipsum ut risus. Nam tempor viverra risus eget accumsan. Integer porta tempus accumsan. Mauris dictum varius magna, eget luctus ligula vestibulum at. Etiam ex justo, lacinia a sollicitudin non, cursus in augue. Praesent augue lacus, ullamcorper vel mi non, blandit pretium tellus. Fusce blandit nunc eget elit porttitor lacinia. Cras justo justo, convallis non lorem sit amet, venenatis porttitor odio. Cras ac malesuada magna. Cras laoreet egestas eros in elementum. Donec tempor porttitor tortor nec feugiat. Integer feugiat orci pharetra condimentum egestas.</p>
<p>Vivamus aliquam mi ac scelerisque commodo. Vestibulum vel nisi ut ex ultrices ornare. Phasellus et turpis quis arcu viverra placerat. Donec id nibh condimentum, sollicitudin libero ut, pulvinar magna. Nunc id sapien luctus elit scelerisque placerat facilisis et justo. Suspendisse potenti. Ut auctor, nisi non tempus finibus, odio eros elementum augue, lobortis porttitor nunc tellus eget justo. Aenean sollicitudin, justo non hendrerit ornare, sapien orci lacinia massa, ut vestibulum mauris elit blandit dui. Sed ultrices est sed diam ullamcorper placerat sit amet sit amet nunc. In faucibus posuere faucibus. In neque velit, vestibulum eget augue id, euismod scelerisque sem. Aenean viverra orci risus, in varius sem commodo sed. Suspendisse elit turpis, dapibus vitae bibendum et, viverra ac leo. Nullam blandit felis lorem, in laoreet eros faucibus posuere.</p>
</section>
<section id="contact">
<h3>Contact</h3>
<p>Aliquam sapien massa, ornare imperdiet cursus varius, bibendum fermentum felis. Sed quis dui at urna posuere tincidunt. Maecenas at nisi in justo sagittis laoreet et sed urna. Ut efficitur ultricies risus, et commodo nibh pellentesque a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pretium semper tellus. Mauris dui urna, dapibus sed velit in, imperdiet egestas massa. Maecenas molestie porta lectus non congue. In vestibulum condimentum scelerisque.</p>
<p>Etiam ultrices enim ut nisl laoreet, at ultricies eros efficitur. Sed nec mauris pharetra nisl semper lacinia. Sed venenatis lectus ipsum. Nulla facilisi. Quisque aliquam rhoncus ex, ac dictum orci ullamcorper in. In hac habitasse platea dictumst. Nunc elementum auctor metus eu varius. Aliquam eu turpis ut augue sagittis aliquet. Mauris laoreet sem sed elit pharetra, a blandit dui interdum. Aliquam mollis luctus fringilla. Sed in tempor tortor. Phasellus placerat augue at enim molestie placerat. Quisque in sodales risus. Cras quis nisi varius, tincidunt enim non, interdum ipsum. Vivamus iaculis, nunc sit amet aliquet auctor, massa sapien vulputate turpis, non viverra nisl est eu diam.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent blandit elementum viverra. Phasellus et quam eu dolor laoreet tincidunt ut gravida odio. Duis ultricies, turpis quis dapibus sagittis, elit nulla dignissim urna, quis luctus velit ipsum ut risus. Nam tempor viverra risus eget accumsan. Integer porta tempus accumsan. Mauris dictum varius magna, eget luctus ligula vestibulum at. Etiam ex justo, lacinia a sollicitudin non, cursus in augue. Praesent augue lacus, ullamcorper vel mi non, blandit pretium tellus. Fusce blandit nunc eget elit porttitor lacinia. Cras justo justo, convallis non lorem sit amet, venenatis porttitor odio. Cras ac malesuada magna. Cras laoreet egestas eros in elementum. Donec tempor porttitor tortor nec feugiat. Integer feugiat orci pharetra condimentum egestas.</p>
<p>Vivamus aliquam mi ac scelerisque commodo. Vestibulum vel nisi ut ex ultrices ornare. Phasellus et turpis quis arcu viverra placerat. Donec id nibh condimentum, sollicitudin libero ut, pulvinar magna. Nunc id sapien luctus elit scelerisque placerat facilisis et justo. Suspendisse potenti. Ut auctor, nisi non tempus finibus, odio eros elementum augue, lobortis porttitor nunc tellus eget justo. Aenean sollicitudin, justo non hendrerit ornare, sapien orci lacinia massa, ut vestibulum mauris elit blandit dui. Sed ultrices est sed diam ullamcorper placerat sit amet sit amet nunc. In faucibus posuere faucibus. In neque velit, vestibulum eget augue id, euismod scelerisque sem. Aenean viverra orci risus, in varius sem commodo sed. Suspendisse elit turpis, dapibus vitae bibendum et, viverra ac leo. Nullam blandit felis lorem, in laoreet eros faucibus posuere.</p>
</section>
</main> Css:
* {
padding: 0;
margin: 0
}
*, ::after, ::before {
box-sizing: border-box;
}
p {
margin-bottom: 20px;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 80px;
}
body {
font-family: 'Lato';
font-size: 16px;
line-height: 1.4;
}
header {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 80px;
padding: 0 25px;
background: rgba(0, 0, 0, 0.5);
color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
font-weight: 700;
color: #fff;
text-decoration: none;
}
nav ul {
display: flex;
list-style: none;
}
nav ul li {
padding: 0 15px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
section {
min-height: calc(100vh - 80px);
padding: 60px 25px;
background: #f5f5f5;
}
section h3 {
font-size: 40px;
line-height: 1;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 30px;
}
#home {
background: #ffce49;
color: #000;
display: flex;
align-items: center;
justify-content: center;
}
#about {
background: #62419a;
color: #fff;
}
#services {
background: #fe763a;
color: #fff;
}
#contact {
background: #1e132d;
color: #fff
}Preview:
See the Pen
Smooth page scroll with top offset with CSS only by SLICEmyPAGE (@slicemypage)
on CodePen.
Video
I hope this tutorial will help you create your awesome website.
If you want your design to be converted into Html and WordPress theme, you can contact us today.
Read also: Button with gradient borders in CSS
