90 Creative Back To Top Links and Best Practices
One of the interesting trends which I noticed recently is to place a back to top link in your web designs. It’s kind of ironic to see what designers can do with back to top links as modern age designers love to experiment with things and observe how people interact with their work. Even though this is not a common trend to follow but still as the new design styles come up, and as more and more designers notice them and make use of them in their work, this kind of trends emerge.
In this presentation, you’ll find a variety of highly-creative, beautiful and most importantly inspirational back to top link which is following the same trend. We don’t want you to follow any specific trend as the aim here is to stimulate your creativity and to inspire your imagination to create your own design trend because your website represents you and your brand.
You may be interested in the following modern age trends related articles as well.
- Single Page Website Designs – Part I, Part II
- Grid Style In Modern Web Design: Showcase and Resources
- 80+ Perfect Ending of Modern Website Design- Footers!
- 80+ Incredible Designs with Bird’s-eye View
- 55 Sexy Our Work Page Designs
- Creative 404 Error Pages Around for Inspiration
Please feel free to join us and you are always welcome to share your thoughts even if you have more reference links related to other trends that our readers may like.
Don’t forget to
subscribe to our RSS-feed and
follow us on Twitter — for recent updates.
A Little About “Back To Top Links”
A study done by the US government in which anchor links were used at the top of the page found the following: On a long page with a large amount of information, having the content headings as links at the top of the page allows users to click to information directly, reducing scrolling and scanning. In our usability tests, users often got frustrated when they had to scroll or scan a lot to find information. Also important, these anchor links let users grasp immediately what information the page contains. Refrance link
I think traditionally, a lot of people use a named Anchor tag to create a “Back To Top” page anchor. I have seen on many website and people still use this method.
<body> <a name="top"></a> <!-- content goes here --> <a href="#top">top</a> </body>
I know that I’ve done that. But now, it felt a bit ganky to me. I mean, the first element in your page is a useless link? That just feels wrong, doesn’t it? There are alternative methods that can avoid silly, useless links. You can refer to some element IDs rather than named anchors to create back to top page links. Here is a simple method you can use. Either you can create a new id for your body tag
<body id="page"> <!-- content goes here --> <a href="#page">back to top</a> </body>
or if you want to avoid creating a new id, you can always refer your back to top link to any of your existing id. For example.
<body> <div id="wrapper"> <!-- content goes here --> <a href="#wrapper">back to top</a> </div> </body>
Traditionally, people use simple back to top links but you can also apply some animation to your scrolling method and make it more fun for your visitors. There are many methods and JavaScript library plugins available for that purpose. For example you can try this jQuery plugin ScrollTo.
Creative Back To Top Links and Best Practices
Throughout history, great artists always found new ways to show their creativity to express themselves and create new trends and techniques to remark their work apart from the rest of the crowd. The Definition of design is more critical in modern terms as now design is a way of communication; and, more specifically, Web design is a well define platform for content. There is no “Good” and “Bad” in design. It always define as a “Different”.
01. Stuffandnonsense
02. Rapidxhtml
03. Dawghousedesignstudio
04. Visitmix
05. Visualboxsite
06. Leihu
07. Kinoz
08. Squarefactor
09. Meshu
10. Friml
11. Blogfullbliss
12. Dharmafrog
13. Pivonka
14. Psdlayout
15. Kineticshadows
16. Fullcreammilk
17. Webleeddesign
18. Moustacheme
19. Ftdesigner
20. Two24studios
21. Brandmurder
22. Toggle
23. Jeffsarmiento
24. Monsterpreneurs
25. Spicydesign
26. Dannyblackman
27. Tanyamerone
28. Dougdosberg
29. Bubblessoc
30. Markdearman
31. Nue-media
32. Delugestudios
33. Gpacheco
34. Ja-nic
35. Chiragjsolanki
36. Dreamerlines
37. Aseed
38. Emrahyaman
39. Douglasmenezes
40. Wpdesigner
41. Greenie Theme
42. Launchmind
43. Jeannaandjeff
44. Taufiq-ridha
45. Chigarden
46. Hebatec
47. Incayellow
48. Kevadamson
49. Tonyyoo
50. Olliekav
51. Elliotjaystocks
52. Bestwebgallery
53. Webdesignerwall
54. Bloggerbakeoff
55. Deletelondon
56. Bienbienbien
57. Redcrownstudio
58. Studioespace
59. Zufanek
60. Decatur-airport
61. Thegregbradyproject
62. Slydial
63. Nickstedt
64. Lonnroth
65. Clippinjam
66. Tntpixel
67. Erskinedesign
68. Area17
69. Socialsnack
Simple, Minimal, Yet Effective Back To Top Styles
70. Dcresource
71. Thecssgallerylist
72. Albertlo
73. Gapersblock
74. Bainbridgestudios
75. Hongkiat
76. Clearspring
77. Redbrickhealth
78. Jansochor
79. Loft-living-krefeld
80. Mynxx
81. Darkmotion
82. Spoongraphics
83. Chamainc
84. Abduzeedo
85. Sebdesign
86. Shinybinary
87. Susannepaschke
88. Crazyleafdesign
89. Pmddemo
90. CSSbeauty
Find Something Missing?
While compiling this list, it’s always a possibility that we missed some other great resources. Feel free to share it with us.
Author : Daniel AdamsDaniel Adams is the chief editor of iShift from San Diego, California. He has been in developer and designer world for approximately 6 years. He love all things having to do with PHP, MySQL, CSS, AJAX, or jQuery.101 Articles posted by Daniel Adams. |





































































































RSS Feed
Email Feed




Submit News








Leave a Comment Subscribe to RSS Feed Subscribe by Email
i know this is off topic, but how did the webmaster accomplish this comment section ? is there a tutorial somewhere ?
Wow, these are extremely well done. Good compilation.
Tweeted it.
Bonne, don’t know if there is a tutorial for that. You will need to code it by yourself. So I guess you should have a basic understanding of PHP and how wordpress comments work.
This article has been shared on favSHARE.net.
Splendid Collection.
Nice designs. Thanks.
I love those who follow you on the right side all the time, I think is java but I’m not capable to create one by my own on my site so for the moment I have the normal in the footer, like in the little tutorial you just made.
Great list of examples, thanks for including Kinetic Shadows.
thats really cool stuff there which you displaying, i really appreciate your effort
Any thoughts on importance of naming the id with a SEO name? I see the Full Cream Milk site doesn’t use “top” or “wrapper” but instead whacks their URL in again:
http://www.fullcreammilk.co.uk/
Back to top goes to:
http://www.fullcreammilk.co.uk/#www-fullcreammilk-co-uk
Your thoughts? I’d have guessed that the search engines won’t be listing this as a new URL, so it would just be another chance to up the % of your keyword’s appearances on the page?
Awesome stuff! I’m inspired to create smth like these back to top on my blog too.
http://www.249designs.com has a cool on at the bottom of their page. I though so anyway.
I meant, they have “one”… lol
awesome and very useful post. you packed an amazing number of really good examples in here.
cheers.
Wow, it’s useful information ))
Thanks for sharing the work. It seems that installing back to top link can cause a reduction in ppc click numbers. This is probably because instead of scrolling and watching the ads people just skip them altogether. Just my 2 cents.
LOL @ “Refrance Link” in first paragraph under A Little About “Back To Top Links” … Re-France is how I pronounced it in my mind before I said “wtf” to myself and realized you meant REFERENCE Link.
Oh, I’m a dick. Sure.
very creative and inspirative for my design love this one
tthanks for sharing byme
Really inspiring post, thanks.
Back to top buttons/link are important for usability when the pages are too long and the navigation in the footer is not full or small. You simply make it more convenient to browse over your website pages while prompting your website visitors to website most important pages/section
Here is another example of back to top link
http://clearideaz.com/articles/#cache-zoomin
also nice one:
http://nikiel-design.de/
found this via twitter – love the smoothscroll effect
Excelentttttttttttt
Your NameMarch 6, 2010
1. Browser is javascript enabled and accepting cookies.
2. Clear browser cache and try again.