21 Intriguing Back to Top Buttons


Introduction

The back to top button is essential for websites with long pages. It should allow the reader to easily navigate back to the top without going through the tedious task of scrolling all the way up. There are a few popular styles of doing this. The simplest style is just a button located in or near the footer that clearly points out an easy way back. The second style is a fixed button somewhere near the bottom left or right of the page that appears once the user scrolls down past the fold (the first visible part of the web page before any scrolling is down). Both are equally effective in my eyes, but the best examples of back to top buttons are the creative and eye catching ones which will cause the least confusion to the reader.

Table of Contents

Best Practices: Back to Top Buttons
Freebies and Tutorials
Premium Themes and Resources

VasonaNetworks.com

Bianca Mangels

This is yoke

Ghost Horses

Inmotion Massage

Niek Dekker

no12creative.com

Italio Kitchen

Narrow Design

Watracz

Pulpfingers

Ketch Studio

Windows of New York

Pizzulata

At the pool

Thomas Oliver Band

More Hazards

Make Better Websites

The Ecology Center

Paul Factory

Kill Switch App

Dribbble Inspiration

Freebies and Tutorials

To the Top Button Freebies – ThemesKingdom
Resources for back to top buttons are hard to come by, but ThemesKingdom offers 5 types of clean simple buttons that will make your site look great.

Fixed Back to Top Button Tutorial – FiveForBlogger
Learn how to make a smooth scrolling back to top button in a fixed bar with jQuery.

15+ Best jQuery Scroll to Top Plugins
Find jQuery plugins that will make adding back to top buttons to your website even easier.

Premium Resources

Ready2Go – 5 Footers Layouts

These 5 footers by Yashma are simple but beautiful, and 3 of them have great examples of back to top buttons.

GoTop With On Demand Menu

This premium resource is made more for a fixed header look but also includes a back to top button

Premium Themes

MOKSH – Responsive HTML5 Theme

Yin & Yang: Clear and Slick WP Portfolio Theme

Typegrid – Responsive News & Magazine Theme

Coco – Clean & Minimal Portfolio/Blog Theme – WP

Phrase – Responsive WordPress Blog Theme

Enews Responsive News & Portofolio Template