Adding a Scroll to Top Button to a Website

http://www.webtipblog.com/adding-scroll-top-button-website/

 

Adding a scroll to top button to your website can be a great way to allow your users to navigate, especially if you have long-scrolling pages. A scroll button should be subtle and it has become expected to see one on the lower right of the page. Some sites include the button in the footer while others use fixed positioning to place the button and show/hide the button based on where the user is on the page. This tutorial will cover how to display the scroll button using jQuery when the user scrolls down the page a little. We’ll use an icon font from Font Awesome but you could easily substitute a Bootstrap glyph or any other icon.

 

Style and Script Libraries

We need to make sure two libraries are present on our page. The first is jQuery, as we’ll be using that to hide/show the button and to scroll the page when the user clicks the button.

If jQuery is not already in use on your site, add the following just before the closing <body> tag of the page.

The next step is to add the icon font library. If you’re not already using Font Awesome, then include the following to the <head> element of your page.

 

The HTML Markup

The HTML for the button is pretty straight forward. It may change slightly if you use an icon font, an image, or text. We’ll be using an icon font for this demonstration. Add the anywhere in the <body>element of the page.

 

CSS Styles

The CSS for the button is pretty straight forward as well. The colors, sizes, and other properties can be changed, but the important styles are the position, visibility, and opacity properties. Add the following to the <head> element.

The .show class is used to change the visibility of the button, the default style keeps the button hidden from view. There are also transition properties to fade the button in and out when shown. This transition is why we aren’t using display:none; or jQuery.hide() to hide the button.

 

The Javascript

There are two components that need to be handled by jQuery. The first is to show/hide the button as the user scrolls around the page. The second is to scroll to the top of the page when the user clicks the button. To begin create an empty element right after the jQuery library script at the bottom of the element.

 

Show and Hide the Button

To show and hide the button we use the jQuery ‘scroll’ event to detect if the user is scrolling. Check the top of the window and detect the offset to the top of the page, if it’s greater then 100 pixels show the button by adding the ‘show’ class to the ‘scroll-top-wrapper’ element. That 100 pixel offset is arbitrary and can be changed to suit your site.

 

Scroll to Top

The next step is to handle a button click and scroll to the top of the page. To do this we use the jQuery ‘click’ event. The scrollToTop function uses the jQuery animate method to scroll up with animation rather than instantly.

 

Thant’s all there is to it, you should be able to load your page and see a button that looks something like this appear.

Scroll-to-top-button

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s