JavaScript Scroll to Top of Page with Floating Button

Plugin Preview

Share this:

How to start using jQuery?
More jQuery Top, Best and New Plugins
Top 100 jQuery Plugins

Plugin Overview

Plugin:	scrolltotop_arrow_js
Author:	Fabian Lins
Licence:	MIT Licence
Published:	January 17, 2024
Repository:	Fork on GitHub
Dependencies:	No External Library Required!
File Type:	zip archive (HTML, CSS & JavaScript)
Package Size:	6.40 KB

Demo Download

How to Make JavaScript Scroll to Top of Page Button

1. Create a div element with the following mentioned class name. It will work as floating back to top button.

    <div id="scrolltotop_parent">
        <div tabindex="0" id="scrolltotop_arrow">
        </div>
    </div>

2. After that, style it with CSS to change its looking.

@media only screen and (max-width: 1023px) {
  #scrolltotop_parent {
    bottom: 25px !important;
    right: 25px !important;
  }
}

#scrolltotop_parent {
  background: #006f9e;
  cursor: pointer;
  width: 50px;
  height: 50px;
  position: fixed;
  bottom: 50px;
  right: 50px;
  z-index: 1004 !important;
}

#scrolltotop_parent:hover {
  opacity: 0.7;
  transition: 0.1s;
}

.scrolltotop_circle {
  border-radius: 50%;
}

.scrolltotop_round_corners {
  border-radius: 5px;
}

.scrolltotop_fadeout {
  opacity: 0 !important;
  transition: 0.5s;
  visibility: hidden;
}

.scrolltotop_fadein {
  opacity: 1;
  transition: 0.5s;
}

#scrolltotop_arrow {
  width: 0px;
  height: 0px;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid white;
  margin: 0 auto;
  margin-top: 19px;
}

#scrolltotop_arrow:focus {
  opacity: 0.7;
  transition: 0.1s;
}

3. After creating floating button, include the scroll to top‘s JavaScript file into your HTML document.

<script type="text/javascript" src="js/scrolltotop_arrow_code.js"></script>

4. Make sure you have enough contents in your document to be scroll, if you haven’t, you can use the sample color boxes for test purpose.

  <div class="samplebox color01"></div>
    <div class="samplebox color02"></div>
    <div class="samplebox color03"></div>
    <div class="samplebox color01"></div>
    <div class="samplebox color02"></div>
    <div class="samplebox color03"></div>
    <div class="samplebox color01"></div>
    <div class="samplebox color02"></div>
    <div class="samplebox color03"></div>
    <div class="samplebox color01"></div>
    <div class="samplebox color02"></div>
    <div class="samplebox color01"></div>
    <div class="samplebox color02"></div>
    <div class="samplebox color03"></div>

5. To change the scrolling position for floating back to top button when it should fade in, edit the scrolltotop_arrow_code file and update the following variable. Default: 200, Type: Number,

scrolltotop_fadein_start_position = 300;

6. Decide weather to show circle back-to-top button or rectangular with rounded corner. Default: true, Type: Boolean. (false for rectangular button).

 scrolltotop_circle_mode= true;

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.