jQuery GoTop

The jQuery plugin that scrolls you back to the top of the page...

Download Now

v0.0.1-alpha

Getting Started

jGoTop has a easy way to quickly get started. Read through the examples to see what's the best approach for you. jGoTop requires jQuery 1.7+. See bellow to decide if this is your use case.

To work as expected you have to add 'jquery.goTop.css' and 'jquery.goTop.js', as well the jQuery lib. We recommend that you include the CSS on your <head> tag and the JavaScript before your closing <body> tag, after jQuery. Initialize the plugin in a script file or an inline script tag and put it inside a DOM ready function after jQuery lib and jGoTop JavaScript: 

<!DOCTYPE html>
<html>
  <head>
    <title>Getting Started</title>
    <link type="text/css" href="plugin/jquery.goTop-0.0.1.css" rel="stylesheet" />
  </head>
  <body>

    <!-- Your Whatever Content Here -->

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="plugin/jquery.goTop-0.0.1.min.js"></script>
    <script>
    $(document).ready(function() {
      $('body').goTop();
    });
    </script>
  </body>
</html>

Settings

With the following options you can control the plugin core functionality. Just read the description and get to know what these options exactly does.

Name Type Default Description
animation boolean true Whether to apply a fade transition to the element, when false the element would simply appears or disappears.
target string 'html' Element in which we should scroll to, by default 'html' is used.
speed int 600 A number determining how long the animation will run until the scroll reach the top of the page, by default the speed used is 600.
distance int 200 The distance that the scroll must be from the top of the window in order to display the element that allows you to scroll to the top of the page, by default we use 200.
position string 'BOTTOM_RIGHT' Where to position the element, the default position is 'BOTTOM_RIGHT'. You can use one of the following: TOP_LEFT, TOP_MIDDLE, TOP_RIGHT, BOTTOM_LEFT, BOTTOM_MIDDLE, BOTTOM_RIGHT.

Examples

This page is running the basic example, look at bottom right of your window... are you seeing anything? Click it and watch the plugin in action!

Besides these two examples, you can either test the other available options in order to get the desired behaviour even knowing this is a simple plugin.

Basic Example

$('body').goTop();

Positioning Example

$('body').goTop({
  position: 'BOTTOM_RIGHT'
});

Get It Now

You can either download it directly from here or you can view the repo on GitHub.

Download Now View on GitHub