Quick Tip: Implement a Sticky “Back to Top” Button
videos

Quick Tip: Implement a Sticky “Back to Top” Button

on Feb 25th 2013 with 15 comments
Tutorial Details
  • Topic: UI
  • Screencast duration: 11 mins
  • Difficulty: Beginner
Download Source Files
Demo View It Online

In this quick tip screencast we’re going to implement a feature which you may have seen on websites with lots of page content. This button appears when the browser window is scrolled beyond a certain point and will allow our users to easily navigate “back to top”.

The implementation is pretty straight-forward; first we’ll create our link with HTML and CSS, then we’ll use a bit of JavaScript to enhance the behavior.

The Screencast


Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via YouTube

Adi Purdila is AdiPurdila on Themeforest
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Whether it’s websites, logos or print materials, my work philosophy is the same: never take any shortcuts and always put my heart and soul into each project because in the end, it’s the small details that count and the more effort I put into a project, the better it represents myself as a person and a designer and at the same time, it represents my client in a manner that’s appropriate to his needs. If you’re interested in the HTML Templates and Landing Pages I’m developing, you can check them out on my portfolio page on ThemeForest.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://twitter.com/borowskirafal Rafał Borowski

    Nice one. I like it.

  • Ken

    There is a banner, right above this comment section that says, “Hello! You can grab source files and a BONUS tutorials from the members area. Then it brings me to the main page at tutsplus.com, which I’m a member of.. But Here’s my question. When I search for, ‘Back to Top’ on the tutsplus homepage, I get 72 pages of results.

    So, where is this bonus video at?

    • ianyates

      That’s perhaps a bit misleading, sorry.. Webdesigntuts+ content is all available freely on this site. The source download is at the top of the page; the video download is underneath the embedded video.

      Hope that helps!

  • Chris Becker

    Great tip! Thinking of implementing it right now at our corporate site.

  • http://www.facebook.com/al.mcrorie Al McRorie

    tried it in IE8 initially, does not work at all, from looking at the code, why is it not working in IE8?

    • Adi Purdila
      Author

      It works, but it’s not really visible. IE8 doesn’t support rgba() values for colors, so the button is shown without a background color.

      You can either provide a fallback color for older browsers, like this:


      background-color: black;
      background-color: rgba(0, 0, 0, 0.3);

      or use a normal color instead of rgba :)

    • http://croftmedia.co.uk/ Greg Tyler

      Appears to be due to the use of rgba, which IE8 doesn’t support. The button’s there, but invisible.

  • Jibin

    Can any body tell me how we can achieve this by only Vanilla JS!without any external scripts?

  • dudko

    Great tutorial. I used it, too.

    Other question: Which color scheme you use in this video? It creates a nice look & feel and seems like it’ s perfect to code with.

    • Adi Purdila
      Author

      The color scheme is Specials Board :)

  • Pingback: 即実装可能！ページをスクロールすると現れる「ページトップへ（Go Top）」ボタンを簡単につくる方法 | yugurido

  • http://www.behance.net/MiselTekinder Misel Tekinder

    Nice tip! :)

  • http://twitter.com/tjdesignpl tjdesign

    how do i add a fade in effect on scrolling, so the button appears after scrolling, and not displaying while on the top of the page – that makes it more useful

    • Adi Purdila
      Author

      Well, it’s all in the video :) Use some very simple jQuery functions to calculate the scroll position. If it passes a certain point then use fadeIn(), else fadeOut().

  • Art

    hi, sorry for question! does it works on ipad for browsers?

    • Adi Purdila
      Author

      From what I’ve tested it does work :)

  • Pingback: Quick Tip: Implement a Sticky “Back to Top” Button | Webdesigntuts+ | Stephen James Foster