Quick Tip: Implement a Sticky "Back to Top" Button

Adi Purdila Feb 25, 2013

Read Time: 1 min

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

JavaScript jQuery HTML & CSS

Did you find this post useful?

Yes No

Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.

Adi Purdila

Adi Purdila is a web design instructor for Tuts+. With over 100 courses and 200 tutorials published to date, Adi's goal is to help students become better web designers and developers by creating content that’s easy to follow and offers great value. Being self-taught himself, Adi strongly believes that constant learning (academic or otherwise) is the only way to move forward and achieve your goals. When not typing away at his keyboard, he loves woodworking and caring for his ever-growing family of rescue pets. You can stay up to date with what he's doing by following him on social media or visiting his website at adipurdila.com.

adipurdila