90 Creative Back To Top Links and Best Practices

Posted in Inspiration, Web Design July 14th, 2009 By Daniel Adams 80 Comments

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 related articles as well.

Feel free to join us and you are always welcome to share your thoughts that our readers may find helpful.

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”.

InstantShift - Daily Resource for Web Designers and Developers

90 Creative Back To Top Links and Best Practices

A Little About “Back To Top Links”

Creative Back To Top Links and Best Practices

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