show/hide floating back to top and bottom keys while scrolling page - Jquery

Amir
November 16, 2022
215 views
0 votes
2 Answers

I need to show/hide two floating buttons on page scrolling for back to top and back to bottom.
Here is my code.

It should shows, back to top button while scrolling page to bottom (it works) and shows back to bottom button while scrolling page to top.(not working properly)

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {
  scrollFunction()
};

function scrollFunction() {
  if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
    document.getElementById("toTop").style.display = "inline";
    document.getElementById("toBottom").style.display = "none";
  } else {
    document.getElementById("toTop").style.display = "none";
    document.getElementById("toBottom").style.display = "inline";
  }
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}

// When the user clicks on the button, scroll to the bottom of the document    
function botFunction() {
  let height = document.body.clientHeight;
  document.body.scrollTop = height;
  document.documentElement.scrollTop = height;

}

body {
  font-family : Arial, Helvetica, sans-serif;
  font-size   : 20px;
  }
#toTop {
  display          : none;
  position         : fixed;
  bottom           : 20px;
  right            : 30px;
  z-index          : 99;
  font-size        : 18px;
  border           : none;
  outline          : none;
  background-color : red;
  color            : white;
  cursor           : pointer;
  padding          : 15px;
  border-radius    : 4px;
  }
#toTop:hover {
  background-color : #555;
  }
#toBottom {
  display          : none;
  position         : fixed;
  top              : 20px;
  right            : 30px;
  z-index          : 99;
  font-size        : 18px;
  border           : none;
  outline          : none;
  background-color : red;
  color            : white;
  cursor           : pointer;
  padding          : 15px;
  border-radius    : 4px;
  }
#toBottom:hover {
  background-color : #555;
  }

0<br><br> 1<br><br> 2<br><br> 3<br><br> 4<br><br> 5<br><br> 6<br><br> 7<br><br> 8<br><br> 9<br><br> 
0<br><br> 1<br><br> 2<br><br> 3<br><br> 4<br><br> 5<br><br> 6<br><br> 7<br><br> 8<br><br> 9<br><br>
0<br><br> 1<br><br> 2<br><br> 3<br><br> 4<br><br> 5<br><br> 6<br><br> 7<br><br> 8<br><br> 9<br><br> 
0<br><br> 1<br><br> 2<br><br> 3<br><br> 4<br><br> 5<br><br> 6<br><br> 7<br><br> 8<br><br> 9<br><br>
0<br><br> 1<br><br> 2<br><br> 3<br><br> 4<br><br> 5<br><br> 6<br><br> 7<br><br> 8<br><br> 9<br><br> 
0<br><br> 1<br><br> 2<br><br> 3<br><br> 4<br><br> 5<br><br> 6<br><br> 7<br><br> 8<br><br> 9<br><br>
0<br><br> 1<br><br> 2<br><br> 3<br><br> 4<br><br> 5<br><br> 6<br><br> 7<br><br> 8<br><br> 9<br><br> 
0<br><br> 1<br><br> 2<br><br> 3<br><br> 4<br><br> 5<br><br> 6<br><br> 7<br><br> 8<br><br> 9<br><br>


<button onclick="topFunction()" id="toTop" title="Go to top">↑</button>
<button onclick="botFunction()" id="toBottom" title="Go to top">↓</button>

Answers

For that purpose, I would include detection of the scroll direction.

By using it, your code could look like this:

let previousScrollY = 0; //Store previous scroll to detect if the next one is going up or down

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {
  if (previousScrollY > this.scrollY) {
    return scrollFunction('up'); // Or just scrollFunction() as we are not using "up"
  }
  previousScrollY = this.scrollY
  return scrollFunction('down');
};

function scrollFunction(direction) {
  if ( 
    (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) &&
    direction === 'down'  
  ) {
    document.getElementById("toTop").style.display = "inline";
    document.getElementById("toBottom").style.display = "none";
  } else {
    document.getElementById("toTop").style.display = "none";
    document.getElementById("toBottom").style.display = "inline";
  }
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}

// When the user clicks on the button, scroll to the bottom of the document    
function botFunction() {
  let height = document.body.clientHeight;
  document.body.scrollTop = height;
  document.documentElement.scrollTop = height;

}

body {
  font-family : Arial, Helvetica, sans-serif;
  font-size   : 20px;
  }
#toTop {
  display          : none;
  position         : fixed;
  bottom           : 20px;
  right            : 30px;
  z-index          : 99;
  font-size        : 18px;
  border           : none;
  outline          : none;
  background-color : red;
  color            : white;
  cursor           : pointer;
  padding          : 15px;
  border-radius    : 4px;
  }
#toTop:hover {
  background-color : #555;
  }
#toBottom {
  display          : none;
  position         : fixed;
  top              : 20px;
  right            : 30px;
  z-index          : 99;
  font-size        : 18px;
  border           : none;
  outline          : none;
  background-color : red;
  color            : white;
  cursor           : pointer;
  padding          : 15px;
  border-radius    : 4px;
  }
#toBottom:hover {
  background-color : #555;
  }

0<br><br> 1<br><br> 2<br><br> 3<br><br> 4<br><br> 5<br><br> 6<br><br> 7<br><br> 8<br><br> 9<br><br> 
0<br><br> 1<br><br> 2<br><br> 3<br><br> 4<br><br> 5<br><br> 6<br><br> 7<br><br> 8<br><br> 9<br><br>
0<br><br> 1<br><br> 2<br><br> 3<br><br> 4<br><br> 5<br><br> 6<br><br> 7<br><br> 8<br><br> 9<br><br> 
0<br><br> 1<br><br> 2<br><br> 3<br><br> 4<br><br> 5<br><br> 6<br><br> 7<br><br> 8<br><br> 9<br><br>
0<br><br> 1<br><br> 2<br><br> 3<br><br> 4<br><br> 5<br><br> 6<br><br> 7<br><br> 8<br><br> 9<br><br> 
0<br><br> 1<br><br> 2<br><br> 3<br><br> 4<br><br> 5<br><br> 6<br><br> 7<br><br> 8<br><br> 9<br><br>
0<br><br> 1<br><br> 2<br><br> 3<br><br> 4<br><br> 5<br><br> 6<br><br> 7<br><br> 8<br><br> 9<br><br> 
0<br><br> 1<br><br> 2<br><br> 3<br><br> 4<br><br> 5<br><br> 6<br><br> 7<br><br> 8<br><br> 9<br><br>


<button onclick="topFunction()" id="toTop" title="Go to top">↑</button>
<button onclick="botFunction()" id="toBottom" title="Go to top">↓</button>

I will do that this way…

const
  scope       = document.documentElement
, btGoBot     = document.querySelector('#toBottom')
, btGoTop     = document.querySelector('#toTop')
, borderDelta = 300
  ;
window.onscroll = btTopBotShow;
window.onresize = btTopBotShow;

btTopBotShow(); // on page load...

btGoBot.onclick = () =>
  {
  scope.scrollTop = scope.scrollHeight - window.innerHeight;
  }
btGoTop.onclick = () =>
  {
  scope.scrollTop = 0;
  }

function btTopBotShow()
  {
  let bottomDelta = scope.scrollHeight - window.innerHeight - scope.scrollTop;

  btGoBot.classList.toggle('noDisplay', bottomDelta     < borderDelta )
  btGoTop.classList.toggle('noDisplay', scope.scrollTop < borderDelta )
  }

body {
  font-family : Arial, Helvetica, sans-serif;
  font-size   : 20px;
  }
#toTop,
#toBottom {
  position         : fixed;
  right            : 30px;
  z-index          : 99;
  font-size        : 18px;
  border           : none;
  outline          : none;
  background-color : red;
  color            : white;
  cursor           : pointer;
  padding          : 15px;
  border-radius    : 4px;
  }
/*
#toBottom { top    : 20px; }
#toTop    { bottom : 20px; }
*/
#toBottom { top : calc( 50vh - 60px ); }
#toTop    { top : calc( 50vh +  4px ); }

#toTop:hover,
#toBottom:hover {
  background-color : #555;
  }
.noDisplay {
  display : none;
  }

0 top <br><br> 1<br><br> 2<br><br> 3<br><br> 4<br><br> 5<br><br> 6<br><br> 7<br><br> 8<br><br> 9<br><br> 
  0<br><br> 1<br><br> 2<br><br> 3<br><br> 4<br><br> 5<br><br> 6<br><br> 7<br><br> 8<br><br> 9<br><br>
  0<br><br> 1<br><br> 2<br><br> 3<br><br> 4<br><br> 5<br><br> 6<br><br> 7<br><br> 8<br><br> 9<br><br> 
  0<br><br> 1<br><br> 2<br><br> 3<br><br> 4<br><br> 5<br><br> 6<br><br> 7<br><br> 8<br><br> 9<br><br>
  0<br><br> 1<br><br> 2<br><br> 3<br><br> 4<br><br> 5<br><br> 6<br><br> 7<br><br> 8<br><br> 9<br><br> 
  0<br><br> 1<br><br> 2<br><br> 3<br><br> 4<br><br> 5<br><br> 6<br><br> 7<br><br> 8<br><br> 9<br><br>
  0<br><br> 1<br><br> 2<br><br> 3<br><br> 4<br><br> 5<br><br> 6<br><br> 7<br><br> 8<br><br> 9<br><br> 
  0<br><br> 1<br><br> 2<br><br> 3<br><br> 4<br><br> 5<br><br> 6<br><br> 7<br><br> 8<br><br> 9 bottom
  
<button id="toBottom" title="Go to botton" >↓</button>
<button id="toTop"    title="Go to top"    >↑</button>

Please signup or login to give your own answer.

Click here to cancel reply.

show/hide floating back to top and bottom keys while scrolling page – Jquery

Answers