Tag: scroll

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:

CSS scroll-behavior Property

How to change the CSS Gradient Background On Scroll?

Scroll Indicator