The CSS scroll-behavior property defines whether to smoothly animate the scroll position, instead of a straight jump (default), when the user clicks on a link within a scrolling box.
Syntax:
scroll-behavior: auto|smooth;
auto (default) – a straight jump/ scroll effect between elements within the scrolling box.
smooth – a smooth transition/ scrolling effect between elements within the scrolling box.
Demo:
You can add the CSS scroll-behavior: smooth to the <html> element to enable smooth scrolling for the whole page, or you can add it to a specific scroll container:
<!DOCTYPE html>
<html>
<head>
<style>
.wrap {
scroll-behavior: smooth;
}
#part1 {
height: 300px;
background-color: #e76f51;
}
#part2 {
height: 300px;
background-color: #2a9d8f;
}
.link1, .link2 {
text-decoration: none;
background-color: #e9c46a;
padding:10px;
margin-left:15px;
color: #264653;
}
</style>
</head>
<body>
<div class="wrap">
<div class="main" id="part1">
<h3>Part 1</h3>
<a class="link1" href="#part2">Click Me to Smooth Scroll to Part 2 below.</a>
</div>
<div class="main" id="part2">
<h3>Part 2</h3>
<a class="link2" href="#part1">Click Me to Smooth Scroll to Part 1.</a>
</div>
</div>
</body>
</html>
To learn how to create the Button – Scroll To Top with the smooth scroll effect, follow the steps below:
Demo:
Step1.
Add HTML
Create the text container and add some text and the button:
<div class="content">
<div class="text"><h1 class="heading">Scroll Down</h1>
<p>He was an old man who fished alone in a skiff in the Gulf Stream and he had gone eighty-four days now without taking a fish. In the first forty days a boy had been with him. But after forty days without a fish the boy’s parents had told him that the old man was now definitely and finally salao, which is the worst form of unlucky, and the boy had gone at their orders in another boat which caught three good fish the first week. It made the boy sad to see the old man come in each day with his skiff empty and he always went down to help him carry either the coiled lines or the gaff and harpoon and the sail that was furled around the mast. The sail was patched with flour sacks and, furled, it looked like the flag of permanent defeat. The old man was thin and gaunt with deep wrinkles in the back of his neck. The brown blotches of the benevolent skin cancer the sun brings from its [9] reflection on the tropic sea were on his cheeks. The blotches ran well down the sides of his face and his hands had the deep-creased scars from handling heavy fish on the cords. But none of these scars were fresh. They were as old as erosions in a fishless desert. Everything about him was old except his eyes and they were the same color as the sea and were cheerful and undefeated. “Santiago,” the boy said to him as they climbed the bank from where the skiff was hauled up. “I could go with you again. We’ve made some money.” The old man had taught the boy to fish and the boy loved him. “No,” the old man said. “You’re with a lucky boat. Stay with them.” “But remember how you went eighty-seven days without fish and then we caught big ones every day for three weeks.”
</p>
<p>“I remember,” the old man said. “I know you did not leave me because you doubted.” “It was papa made me leave. I am a boy and I must obey him.” “I know,” the old man said. “It is quite normal.” “He hasn’t much faith.” [10] “No,” the old man said. “But we have. Haven’t we?” “Yes,” the boy said. “Can I offer you a beer on the Terrace and then we’ll take the stuff home.” “Why not?” the old man said. “Between fishermen.” They sat on the Terrace and many of the fishermen made fun of the old man and he was noteangry. Others, of the older fishermen, looked at him and were sad. But they did not show it and they spoke politely about the current and the depths they had drifted their lines at and the steady good weather and of what they had seen. The successful fishermen of that day were already in and had butchered their marlin out and carried them laid full length across two planks, with two men staggering at the end of each plank, to the fish house where they waited for the ice truck to carry them to the market in Havana. Those who had caught sharks had taken them to the shark factory on the other side of the cove where they were hoisted on a block and tackle, their livers removed, their fins cut off and their hides skinned out and their flesh cut into strips for salting. When the wind was in the east a smell came across the harbour from the shark factory; but today there [11] was only the faint edge of the odour because the wind had backed into the north and then dropped off and it was pleasant and sunny on the Terrace.</p>
<p>“Santiago,” the boy said. “Yes,” the old man said. He was holding his glass and thinking of many years ago. “Can I go out to get sardines for you for tomorrow?” “No. Go and play baseball. I can still row and Rogelio will throw the net.” “I would like to go. If I cannot fish with you. I would like to serve in some way.” “You bought me a beer,” the old man said. “You are already a man.” “How old was I when you first took me in a boat?” “Five and you nearly were killed when I brought the fish in too green and he nearly tore the boat to pieces. Can you remember?” “I can remember the tail slapping and banging and the thwart breaking and the noise of the clubbing. I can remember you throwing me into the bow where the wet coiled lines were and feeling the whole boat shiver and the noise of you clubbing him like chopping a tree down and the sweet blood smell all over me.” [12] “Can you really remember that or did I just tell it to you?”</p>
</div>
<button onclick='window.goUp({top: 0, behavior: "smooth"});' id="top">Top</button>
</div>
To learn how to create the CSS Parallax Scrolling Effect follow the steps below:
Demo:
Step1.
Add HTML
<div class="image-1">
<div class="text">
<span class="background">Scroll Down⬇</span>
</div>
</div>
<div class="main">
<h3>TULIPS</h3>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur est urna, malesuada sollicitudin tempus non, rutrum eu diam. Suspendisse vitae lobortis ante, sit amet venenatis erat. Nulla sollicitudin placerat sapien id aliquam. Fusce malesuada, est at venenatis sagittis, nulla risus elementum neque, sit amet varius odio sem eget libero. Cras scelerisque ex lectus, vel molestie arcu tristique vulputate. Nunc fringilla suscipit massa. Praesent nulla sem, aliquam et molestie id, eleifend ac nunc. Aliquam augue odio, porta sed lacinia non, iaculis sed lorem. Proin pulvinar ex quis turpis pulvinar fringilla. Ut a risus dictum velit consequat consectetur ut eu nulla. Phasellus a convallis velit. Sed fermentum justo at justo semper, ut semper velit porta. Phasellus luctus est quam, id pulvinar urna consectetur ut. Mauris tristique erat ut risus varius placerat. Vivamus dui arcu, vulputate et mi nec, eleifend rhoncus nunc.
</p>
</div>
<div class="image-2">
<div class="text">
<span class="background">Tulip Festival</span>
</div>
</div>
<div class="someText">
<div style="background-color:#333;text-align:center;padding:50px 80px;text-align: justify;">
<p>Scroll up and down to see how Parallax Scrolling works.</p>
</div>
</div>
<div class="image-3">
<div class="text">
<span class="background">Scroll Up⬆</span>
</div>
</div>
<div class="someText">
<div style="background-color:#333;text-align:center;padding:50px 80px;text-align: justify;">
<p>Scroll up and down to see how Parallax Scrolling works.</p>
</div>
</div>
<div class="image-1">
<div class="text">
<span class="background">Thanks!</span>
</div>
</div>