Simple Practical Back To Top Plugin - jQuery goTop.js

File Size: 10.7 KB
Views Total: 3865
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="" 
<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 () {


    // 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.