How to Create a Back to Top Link with Examples

14 May How to Create a Back to Top Link with Inspirational Examples

Posted at 20:54h in Blog by Editorial Staff 0 Comments

0 Likes

Hey all, in today’s article we will look at some really cool examples of the classic back to top buttons by other web designers. I will also walk you through how you can create your own scroll to the top link, with a bit of CSS you too can create something awesome.

If your web pages are generally short and do not require any scrolling down the page at all, then this is not necessary for you. However, if you write longer content as we do at 85ideas then this is an excellent idea and definitely helps with the user experience. Often I find myself on lots of huge site like ThemeForest and others that generally have really long pages. But they fail to include a simply back to top link to eliminate a lot of scrolling up and down, especially when you are going through several pages. Do not make that simple mistake and frustrate your users.

The HTML code for “back to top.”

There are several methods of achieving this; I will show you a simple version you can implement on your website now.

<body id="page">
  <!-- content goes here -->
  <a href="#page">back to top</a>
</body>

Now that you know how to create a simple scroll to the top link let us have a look a few awesome creative examples. After hours of searching below is what I thought to be eye-catching and stood out to me. Also, if you feel I have missed any out, then please leave it in the comments section below.

Survivor-magazine.com

survivor magazine back to top

Rapidxhtml.com

Rapidxhtml back to top

The guys at Rapidxhtml done an excellent job with their jump to the top of the page link. But the only concern I have is that you have to hover over the image before the back to top text appears with many beginners might overlook.

Kinoz.com

KINO scroll up

In 2015, I have seen a shift from the creative style to a more minimalistic and modern design and the is a great example of just that.

Webleeddesign.com

scroll top design

This back to top button really catches my attention because of the animated little monster eyes that seem to follow my mouse locate. The good thing is that it’s unlikely you will overlook it plus it as the text “up”.

Brandmurder.com

Chiragjsolanki.com

scroll top

If you need more ideas on your scroll to top text/image, then head over to scroll to top for free images and further ideas you can implement on your website now.
Wrapping up

The big take away from reviewing these jump to top link is just you make sure that your image or text is clearly marked depending on your audience.

Let me know how I did? Have you left with food for thought on spicing up your scroll to top button? Which of the design featured was your favorite? If you are not comfortable editing your WordPress site, then there are several plugins out there to help you quickly add your back to top link. The plugin I would most recommend is https://wordpress.org/plugins/backtotop/.