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.
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!
- JQuery topLink Plugin (Used by Choreographics)
- Scroll To Top Plugin (Used by Awwwards)
- 7 ‘Scroll to Top’ jQuery Solutions (A roundup of other Go to top resources)
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.
Comments