JavaScript implementation of the back to top button example

This article shares the specific code for JavaScript to implement the back to top button for your reference. The specific content is as follows

Ideas:

First, we design its static style, which mainly uses fixed positioning to fix it at a certain position at the bottom of the page.

.backtotop {
    position: fixed;
    bottom: 80px;
    right: 80px;
    width: 80px;
    height: 80px;
    background-color: #ccc;
    font-size: 20px;
    text-align: center;
    padding-top: 12px;
    box-sizing: border-box;
    cursor: pointer;
    color: #000;
    /* Hide the button first */
    display: none;
  }

The second is the design logic part: when the mouse clicks the "Back to Top" button, it will return to the top at a certain "speed" every 20 milliseconds. After returning to the top, it must be cleared, otherwise the page will automatically return to the top as soon as it is pulled down. Two methods are used here, one is setInterval, the other is clearInterval, the former is to set the timer, and the latter is to clear the timer.

One thing to note here is that in order to avoid conflicts, you must "set the timer first" before setting the timer.

Finally, in order to increase the user experience, we need to design it so that if the current page is at the top, the "Back to Top" button will be automatically hidden; if the current page is not at the top, the "Back to Top" button will be displayed.

Finally, let’s take a look at the complete case:

<a href="javascript:;" class="backtotop" id="backtotop">Back to<br>Top</a>

a {
    text-decoration: none;
  }

  body {
    height: 5000px;
  }

  .backtotop {
    position: fixed;
    bottom: 80px;
    right: 80px;
    width: 80px;
    height: 80px;
    background-color: #ccc;
    font-size: 20px;
    text-align: center;
    padding-top: 12px;
    box-sizing: border-box;
    cursor: pointer;
    color: #000;
    /* Hide the button first */
    display: none;
}

<script>
(function(){
  //Get the element var backtotop = document.getElementById('backtotop');

  var timer;
  backtotop.onclick = function(){
    //Set the table to close first to prevent timer conflict clearInterval(timer);

    //Set the timer timer = setInterval(function(){

      // Change the scrollTop element value of the root element // Compatibility issue var top = document.documentElement.scrollTop || document.body.scrollTop;
      top = top - 80;
      document.documentElement.scrollTop = top;
      document.body.scrollTop = top;

      //Judge if(top <= 0) {
        //Turn off the timer clearInterval(timer);
      }
    },20);
  };

  //Monitor page scrolling window.onscroll = function() {
    //Get the scroll value var scrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.scrollY;

    //When the page is not scrolled, the back to top button is hidden if (scrollTop == 0) {
      backtotop.style.display = 'none';
    }else {
        backtotop.style.display = 'block';
    }
  };
})();

<script>

When the page does not scroll:

When the page is scrolled:

Finally, those who are interested can try it themselves!

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

JavaScript monitors WeChat browser and comes with back button time
Implementing the back to top button based on Javascript
How to implement the javascript return to top button
Implementation of the return to top button in javascript
How to prevent the browser back button using JavaScript
JavaScript implements the return to top button in the lower right corner of the blog page
JS returns to the previous page example code through pictures and buttons respectively
js Click the button to pop up another page, select the value and return to the current page
Implementation of returning selected data by clicking a button in a JavaScript pop-up form
JavaScript to implement the back to top button

<<: How to reset MySQL root password

>>: How to install redis in Docke