jquery-scrolltop-button
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
js
README.md
index.html

README.md

jquery-scrolltop-button

jquery-scrolltop-button is a lightweight and simple JQuery plugin that displays a Scroll-To-Top button when a user scrolls down the screen. The default button is a complete CSS3/Javascript solution without any requirements for extra images. The button is designed to lay over the top of any existing content, and provides the user an easy way to scroll back to the top of the page. This is useful for pages that contain large amounts of content that stretch the page down and especially useful for users on mobile devices.

Requirements

  • Jquery must be preloaded.

Usage

See example files (index.html) in this project for a quick demo.

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.

Optional Configuration

There are two optional configurable options on initialization :

$("body").addScrollTop({
    topOffset: 20,
    buttonInner: '&#94;' 
});
  • topOffset :: offset from top before showing button, numeric value only in pixels, default = 20

- Define how far down the page the user scrolls before the button shows up by using the topOffset option.

  • buttonInner :: button's inner content, html, default = '&#94;' (html entity for ^)

- You can also alternatively change what is displayed inside the button with any HTML you wish:

For example, if you have Font Awesome loaded, use the font-awesome icon instead by initializing this way:

$(document).ready(function() { 
  $("body").addScrollTop({
  	buttonInner: '<i class="fa fa-chevron-up"></i>'
  });
});

or use your own custom image like this:

$(document).ready(function() { 
  $("body").addScrollTop({
  	buttonInner: '<img src="/images/scroll_button.png" />'
  });
});

See a live example here.