Simple Practical Back To Top Plugin - jQuery goTop.js

goTop.js is a dead simple and super lightweight jQuery plugin that auto reveals a 'Scroll To Top' button as you scroll to the very bottom of the webpage.

How to use it:

1. Upload the JavaScript, CSS, and font files to your web server.

• iconfont.css (OPTIONAL)
• iconfont.eot (OPTIONAL)
• iconfont.svg (OPTIONAL)
• iconfont.ttf (OPTIONAL)
• iconfont.woff (OPTIONAL)
• jquery.goTop.js (REQUIRED)

2. Add references to the JavaScript and CSS files.

<link rel="stylesheet" href="iconfont.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="jquery.goTop.js"></script>

3. Create an element for the Back To Top button.

<div id="go-top" class="iconfont icon-cc-top"></div>

4. Initialize the plugin to generate a Back To Top button on the webpage.

$(function () {

  $('#go-top').goTop({

    // top offset
    scrollTop: 100,

    // scroll speed in milliseconds
    scrollSpeed: 1000,

    // fade in/out speed in milliseconds
    fadeInSpeed: 1000,
    fadeOutSpeed: 500
    
  })

})

5. The example CSS for the Back To Top button.

#go-top {
  display: none;
  font-size: 30px;
  position: fixed;
  bottom: 200px;
  right: 50px;
  border: 2px solid #333;
  border-radius: 5px;
  width: 45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  cursor: pointer;
}

---

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