Back To The Top With A Smooth Transition - TopButton

A simple yet fully configurable back to top button plugin for jQuery that enables the user to quickly scroll your long page to the top (or a specific point within the document) with a smooth transition.

How to use it:

1. Include the minified version of the jQuery TopButton plugin after loading jQuery.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="./topbutton.min.js"></script>

2. Initialize the plugin and customize the HTML content & CSS styles of the back to top buton.

$(document).ready(function(){
  $.topbutton({

    // any html content
    // default: "Top"
    html : "<i>Top</i>",
    
    // CSS styles
    // default: "null"
    css : "width:50px; height:50px; background:#22b8cf; border:none; font-size:20px;"

  });
});

3. Set the duration of the animation.

$(document).ready(function(){
  $.topbutton({

    // any html content
    // default: "Top"
    html : "<i>Top</i>",
    
    // CSS styles
    // default: "null"
    css : "width:50px; height:50px; background:#22b8cf; border:none; font-size:20px;",

    // default: 150
    scrollSpeed : 300

  });
});

4. Decide whether to display this back to top button only when the page is scrolled down.

$(document).ready(function(){
  $.topbutton({

    // any html content
    // default: "Top"
    html : "<i>Top</i>",
    
    // CSS styles
    // default: "null"
    css : "width:50px; height:50px; background:#22b8cf; border:none; font-size:20px;",

    // default: false
    // false = always show
    scrollAndShow : true

  });
});

---

This awesome jQuery plugin is developed by cyh3739. For more Advanced Usages, please check the demo page or visit the official website.