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>Step2.
Add CSS
Set the position of the background and elements:
body {
display: flex;
justify-content: center;
}
.content {
position: relative;
display: flex;
justify-content: center;
}Style the text:
.heading {
text-align: center;
position: relative;
}
.text {
width:50%;
font-size: 20px;
padding: 20px 50px;
}Style the button:
#top {
position: fixed;
bottom: 40px;
background-color: #264653;
padding: 20px;
border-radius: 20px;
border: none;
color: white;
font-weight: bold;
left:80%;
cursor: pointer;
display: none;
transition: .2s;
}
#top:hover {
background-color: #2a9d8f;
}
#top:active {
background-color: #e76f51;
}Add CSS @media rule (to display text and the effect on the small screens):
@media only screen and (max-width: 600px) {
.text {
font-size: 15px;
}
}Step3.
Add JavaScript
const button = document.getElementById("top");
window.onscroll = function() {showButton()};
function showButton() {
if (document.body.scrollTop > 25 || document.documentElement.scrollTop > 25) {
button.style.display = "block";
} else {
button.style.display = "none";
}
}
function goUp() {
window.scrollTo({top: 0, behavior: 'smooth'});
}Enjoy coding!
Read also:
How to change the CSS Gradient Background On Scroll?