Go to the Top, Please

Go to the Top, Please

In many websites with lengthy content, one very common features is by providing a “Go to top” button at the end section of an article for users to quick access to the top of the page, without using the scroll bar. This can be achieve easily by using a very simple anchor link that targets the top area of the web page. Cool and straight forward.

Well, actually I saw some really cool “Go To Top” approach which makes the experience a lot better. All you need to do is by adding some Javascript goodness into it. I will show you some real world examples and plugins to achieve the effect. Now, going to top has never been this good!

Real World Examples

Here I show you two similar examples with unique Go To Top approach: one is Awwwards Book, and another one is Choreographics. Try to scroll down to the bottom of the page. Something happened. Yes, the Go To Top button fades in. As for Choreographics, a bottom bar with a Go to Top button fades in. But when you scroll to the top again the button fades off. Neat. Personally, I think this is good because it not just increase the usability, and also adds flavors to the page design.

The Go to top button at Awwwards

Plugins

How to achieve this effect? Well, by looking at the websites’ source code, they are using plugins listed below. Both are small plugins and is easy to implement. As for CSS, you just need to assign an ID to the button, give it a fixed position properties with desired position (left, right, top, bottom), and you are done!

Extra!

I found another plugin which doing the similar thing, but instead of acted as a Go To Top function, it becomes a social bar instead. You can check the plugin here at 5509.me, but it was written in Japanese thou. For sample, click this link. I believe the plugin can be customized to fit your needs.

Similar Posts:
Powered by Shutterstock

Comments

  • http://nihongoup.com Philip Seyfi

    Nice! Just implemented it at http://nihongoup.com/ 🙂

    • jayhan

      Hi Philip, I visited your site, that’s cool! 😀