AMPEDUPDESIGNS

CONSULTING CONCEPTS PERSONAL

A Simple Customizable Scroll-to-Top JQuery Plugin

June 5th, 2014

Increasingly, more new sites are deploying a continuous single-page design with links that essentially scroll down to the content/section that a user wants to see.  One way to allow users a way to return to the top of a page is to add a scroll-to-top button which appears once a user scrolls past a certain offset from the top.  When clicked, the user will gracefully scroll back up to the top.  This is especially useful for mobile devices that have smaller screens view

I've created a super lightweight and configurable jquery-scrolltop-button plugin which allows you to easily add a scroll to top button to do just that.  Simple load the plugin script, bind the plugin to your desired viewport window (in most cases "body" can be used), and you will automatically have a scroll to top button anytime a user moves downword beyond a set offset.

Usage

See example files (index.html) in this project for a quick demo.  This site also uses this plugin.

Add the jquery-scrolltop-button plugin script to your <head> tag or before the closing <body> tag:

<script type="text/javascript" src="/js/jquery-scrolltop-button.1.0.0.min.js"></script> 

* Please note the version number

Make sure to add the CSS styling for the jquery-scrolltop-button in your head or css file:

<style>
.scrollTop-btn {
   background-color:rgba(0,0,0,0.4);
   color:#fff;
   position:fixed;
   bottom:30px;
   right:10px;
   padding:10px 15px 6px 15px;
   border-radius:3px;
   z-index:999;
   font-weight:bold;
}
</style>

The styles included are default styles for the scoll button that pops up. You may modify this to make it more custom to your site if you wish such as color, size, offsets from the viewport edges or if it appears on the left or right side, top or bottom. Note: it is important that you keep the "position:fixed" and "z-index:999" or to a relatively high index so it sits atop any potential content you may have on the page.

Initialize and bind to the DOM window that is being scrolled. A majority of the time, you will want to bind it to the 'body' tag, but in some cases, you may have another DOM element (such as a container, or wrapper) that you wish to bind the scrolling in:

$(document).ready(function() {
  $('body').addScrollTop();
}); 

That's it. Anytime you scroll down from the top offset (20px is default), the scroll to top button will appear at the bottom right of the screen for you.

How it works

When the plugin is initially called, a scroll button div is dynamically added to the end of the body.  A scroll event trigger is added so that whenever a user scrolls, it will be fired.  The plugin detects this and checks to see if the user has scroll passed the defined top offset (by default 20px from the top),  if they have, the scroll to button is shown.  In the same way, if a user is at the top of the page and within the top offset, the scroll button will disappear.

Options

The button's design is entirely set via CSS.  I've included some default css styles that you can use.  The plugin itself has two configurable options:

1.  topOffset:  Specify how many pixels from top the user scrolls before the button appears (and disappears).
2.  buttonInner:   By default, a simple html entity for ^ is shown,  easily change that to anything you want, like a font-awesome icon, or your own custom image.

That's it!  To view more details, an example, and the actual code, go directly to my Github page.

The Code

   jquery-scrolltop-button on Github

 

Questions or improvements? Let me know!

 



Popular Posts