CODEWITHSUNDEEP
javascripthtml
andreszs
andreszs

Reputation: 2956

Dynamically show/hide back to top button with javascript

I'm having a hard time finding a Javascript piece of code to dynamically show the Back to Top button when the user has scrolled, lets say, more than 1000 pixels. All examples use jQuery, and I can't use jQuery. Any help will be very appreciated.

Upvotes: 1

Views: 17432

Answers (4)

Santo Boldizar
Santo Boldizar

Reputation: 1395

Simple but working.

CSS:

#scrollToTop { visibility: hidden; }

JavaScript:

// Show/Hide the button
window.onscroll = function() {
    var pageOffset = document.documentElement.scrollTop || document.body.scrollTop,
        btn = document.getElementById('scrollToTop');
    if (btn) btn.style.visibility = pageOffset > 450 ? 'visible' : 'hidden';
};

Upvotes: 1

A. Rol
A. Rol

Reputation: 11

This is how I do it. To show back to top button when user scrolls more than 150 pixels down from top of document.

//how to show back to top button when user scrolls more than 150 pixels down from top of document.
var toTopButton = document.querySelector("a");
toTopButton.style.display = "none";//by default should be hidden
document.querySelector('body').onscroll = function(){//whenever they scroll
  if (window.scrollY > 150)//if scroll is 150px from top
    toTopButton.style.display = "block";//if they scroll down, show
  else
    toTopButton.style.display = "none";//if they scroll up, hide
};
html {scroll-behavior: smooth;}
a {
background-color: #f00;
position: fixed;
bottom: 10px;
right: 10px;
}
<html>
<a href="#top">back to top</a>
<body id="top">
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
</body>
<html>

OR to show back to top button when user scrolls more than 150 pixels up from bottom of document.

//how to show back to top button when user scrolls more than 150 pixels up from bottom of document.
var toTopButton = document.querySelector("a");
toTopButton.style.display = "none";
document.querySelector('body').onscroll = function(){
  if (window.innerHeight + 150 < document.body.offsetHeight)//if document long enough
    if (window.scrollY + window.innerHeight > document.body.offsetHeight - 150)//if scroll is 150px from bottom (if 'bottom of what we are looking at' is > than 'bottom of document - 150px earlier)
      toTopButton.style.display = "block";
    else
      toTopButton.style.display = "none";
};
html {scroll-behavior: smooth;}
a {
background-color: #f00;
position: fixed;
bottom: 10px;
right: 10px;
}
<html>
<a href="#top">back to top</a>
<body id="top">
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
</body>
<html>

Upvotes: 1

Abraham Hamidi
Abraham Hamidi

Reputation: 13809

Set the CSS when pageOffset is a certain point (in a window.onscroll event):

window.onscroll = function()
{
    if(pageOffset >= 1000)
    {
        document.getElementById('backToTopID').style.visibility="visible"
    }
};

something more full would be:

window.onscroll = function()
{
    if(pageOffset >= 1000)
    {
        document.getElementById('backToTopID').style.visibility="visible"
    }else
    {
        document.getElementById('backToTop').style.visibility="hidden";
    }
};

DEMO

Upvotes: 13

JerryHuang.me
JerryHuang.me

Reputation: 1790

JavaScript using Window.onscroll

    var appended = false, bookmark = document.createElement("div");
bookmark.id = "arrowUp";
bookmark.innerHTML = "<a href=\"#\" title=\"Top of the page.\">&uarr;<\/a>";

onscroll = function() {
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  if (scrollTop > 500) {
    if (!appended) {
      document.body.appendChild(bookmark);
      appended = true;
    }
  } else {
    if (appended) {
      document.body.removeChild(bookmark);
      appended = false;
    }
  }
};

source

https://developer.mozilla.org/en-US/docs/Web/API/window.onscroll

demo link

http://jsfiddle.net/MA4dC/

Upvotes: 1

Related Questions