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.

90 Creative Back To Top Links and Best Practices

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

01. Stuffandnonsense

instantShift - Creative Back To Top Links

Official Link

02. Rapidxhtml

instantShift - Creative Back To Top Links

Official Link

03. Dawghousedesignstudio

instantShift - Creative Back To Top Links

Official Link

04. Visitmix

instantShift - Creative Back To Top Links

Official Link

05. Visualboxsite

instantShift - Creative Back To Top Links

Official Link

06. Leihu

instantShift - Creative Back To Top Links

Official Link

07. Kinoz

instantShift - Creative Back To Top Links

Official Link

08. Squarefactor

instantShift - Creative Back To Top Links

Official Link

09. Meshu

instantShift - Creative Back To Top Links

Official Link

10. Friml

instantShift - Creative Back To Top Links

Official Link

11. Blogfullbliss

instantShift - Creative Back To Top Links

Official Link

12. Dharmafrog

instantShift - Creative Back To Top Links

Official Link

13. Pivonka

instantShift - Creative Back To Top Links

Official Link

14. Psdlayout

instantShift - Creative Back To Top Links

Official Link

15. Kineticshadows

instantShift - Creative Back To Top Links

Official Link

16. Fullcreammilk

instantShift - Creative Back To Top Links

Official Link

17. Webleeddesign

instantShift - Creative Back To Top Links

Official Link

18. Moustacheme

instantShift - Creative Back To Top Links

Official Link

19. Ftdesigner

instantShift - Creative Back To Top Links

Official Link

20. Two24studios

instantShift - Creative Back To Top Links

Official Link

21. Brandmurder

instantShift - Creative Back To Top Links

Official Link

22. Toggle

instantShift - Creative Back To Top Links

Official Link

23. Jeffsarmiento

instantShift - Creative Back To Top Links

Official Link

24. Monsterpreneurs

instantShift - Creative Back To Top Links

Official Link

25. Spicydesign

instantShift - Creative Back To Top Links

Official Link

26. Dannyblackman

instantShift - Creative Back To Top Links

Official Link

27. Tanyamerone

instantShift - Creative Back To Top Links

Official Link

28. Dougdosberg

instantShift - Creative Back To Top Links

Official Link

29. Bubblessoc

instantShift - Creative Back To Top Links

Official Link

30. Markdearman

instantShift - Creative Back To Top Links

Official Link

31. Nue-media

instantShift - Creative Back To Top Links

Official Link

32. Delugestudios

instantShift - Creative Back To Top Links

Official Link

33. Gpacheco

instantShift - Creative Back To Top Links

Official Link

34. Ja-nic

instantShift - Creative Back To Top Links

Official Link

35. Chiragjsolanki

instantShift - Creative Back To Top Links

Official Link

36. Dreamerlines

instantShift - Creative Back To Top Links

Official Link

37. Aseed

instantShift - Creative Back To Top Links

Official Link

38. Emrahyaman

instantShift - Creative Back To Top Links

Official Link

39. Douglasmenezes

instantShift - Creative Back To Top Links

Official Link

40. Wpdesigner

instantShift - Creative Back To Top Links

Official Link

41. Greenie Theme

instantShift - Creative Back To Top Links

Official Link

42. Launchmind

instantShift - Creative Back To Top Links

Official Link

43. Jeannaandjeff

instantShift - Creative Back To Top Links

Official Link

44. Taufiq-ridha

instantShift - Creative Back To Top Links

Official Link

45. Chigarden

instantShift - Creative Back To Top Links

Official Link

46. Hebatec

instantShift - Creative Back To Top Links

Official Link

47. Incayellow

instantShift - Creative Back To Top Links

Official Link

48. Kevadamson

instantShift - Creative Back To Top Links

Official Link

49. Tonyyoo

instantShift - Creative Back To Top Links

Official Link

50. Olliekav

instantShift - Creative Back To Top Links

Official Link

51. Elliotjaystocks

instantShift - Creative Back To Top Links

Official Link

52. Bestwebgallery

instantShift - Creative Back To Top Links

Official Link

53. Webdesignerwall

instantShift - Creative Back To Top Links

Official Link

54. Bloggerbakeoff

instantShift - Creative Back To Top Links

Official Link

55. Deletelondon

instantShift - Creative Back To Top Links

Official Link

56. Bienbienbien

instantShift - Creative Back To Top Links

Official Link

57. Redcrownstudio

instantShift - Creative Back To Top Links

Official Link

58. Studioespace

instantShift - Creative Back To Top Links

Official Link

59. Zufanek

instantShift - Creative Back To Top Links

Official Link

60. Decatur-airport

instantShift - Creative Back To Top Links

Official Link

61. Thegregbradyproject

instantShift - Creative Back To Top Links

Official Link

62. Slydial

instantShift - Creative Back To Top Links

Official Link

63. Nickstedt

instantShift - Creative Back To Top Links

Official Link

64. Lonnroth

instantShift - Creative Back To Top Links

Official Link

65. Clippinjam

instantShift - Creative Back To Top Links

Official Link

66. Tntpixel

instantShift - Creative Back To Top Links

Official Link

67. Erskinedesign

instantShift - Creative Back To Top Links

Official Link

68. Area17

instantShift - Creative Back To Top Links

Official Link

69. Socialsnack

instantShift - Creative Back To Top Links

Official Link

 

Simple, Minimal, Yet Effective Back To Top Styles

70. Dcresource

instantShift - Creative Back To Top Links

Official Link

71. Thecssgallerylist

instantShift - Creative Back To Top Links

Official Link

72. Albertlo

instantShift - Creative Back To Top Links

Official Link

73. Gapersblock

instantShift - Creative Back To Top Links

Official Link

74. Bainbridgestudios

instantShift - Creative Back To Top Links

Official Link

75. Hongkiat

instantShift - Creative Back To Top Links

Official Link

76. Clearspring

instantShift - Creative Back To Top Links

Official Link

77. Redbrickhealth

instantShift - Creative Back To Top Links

Official Link

78. Jansochor

instantShift - Creative Back To Top Links

Official Link

79. Loft-living-krefeld

instantShift - Creative Back To Top Links

Official Link

80. Mynxx

instantShift - Creative Back To Top Links

Official Link

81. Darkmotion

instantShift - Creative Back To Top Links

Official Link

82. Spoongraphics

instantShift - Creative Back To Top Links

Official Link

83. Chamainc

instantShift - Creative Back To Top Links

Official Link

84. Abduzeedo

instantShift - Creative Back To Top Links

Official Link

85. Sebdesign

instantShift - Creative Back To Top Links

Official Link

86. Shinybinary

instantShift - Creative Back To Top Links

Official Link

87. Susannepaschke

instantShift - Creative Back To Top Links

Official Link

88. Crazyleafdesign

instantShift - Creative Back To Top Links

Official Link

89. Pmddemo

instantShift - Creative Back To Top Links

Official Link

90. CSSbeauty

instantShift - Creative Back To Top Links

Official Link

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.

Like it? Share it.

79 Comments

  1. i know this is off topic, but how did the webmaster accomplish this comment section ? is there a tutorial somewhere ?

  2. Wow, these are extremely well done. Good compilation.

    Tweeted it.

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

  4. This article has been shared on favSHARE.net.

  5. Splendid Collection.

  6. Nice designs. Thanks.

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

  8. Great list of examples, thanks for including Kinetic Shadows.

  9. thats really cool stuff there which you displaying, i really appreciate your effort :)

  10. 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?

  11. Awesome stuff! I’m inspired to create smth like these back to top on my blog too.

  12. http://www.249designs.com has a cool on at the bottom of their page. I though so anyway. ;)

  13. I meant, they have “one”… lol

  14. awesome and very useful post. you packed an amazing number of really good examples in here.

    cheers.

  15. Wow, it’s useful information ))

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

  17. Really inspiring post, thanks.

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

  19. Here is another example of back to top link
    http://clearideaz.com/articles/#cache-zoomin

  20. also nice one:

    http://nikiel-design.de/

    found this via twitter – love the smoothscroll effect

  21. Excelentttttttttttt

  22. Is there any other way to create that scrolling effect without a jquery plugin?

  23. Simply amazing collection of sites :)

  24. Oh great collection. I will write a post on this article very soon.

  25. Again an excellent post. Are really great tips in order to create an original way to create link.
    Thank Instant Shift admin.

  26. Nice ide ato pick out this often-overlooked design element. I especially like the robot one!

  27. The little details in a design like, back to top buttons make all the difference. Although some of those buttons would be pretty hard to see. Nice collection.

  28. im only using the basic one…thanks for the info…

  29. Excellent collection, thanks

  30. Just what I was looking for…thanks a bunch!

  31. Awesome stuff! I’m inspired to create smth like these back to top on my blog too.

  32. Nice & cool informative post!
    i think this is a most popular site on Google.thanks for your sharing.

  33. OH! its awesome!
    there are lot of nice designs showing in this good site.i really enjoy it.

  34. Cool & creative! Great post and very inspiring. Thanks

  35. Nice list!

  36. Hello really Good Work am get & unique idea Your Best Tutorials Thx and GOD BLESS YOU , Get Best SEO and Web Design Complete Tutorials

  37. You mentioned ‘best practice’ in the title, yet I see no explanation of what the best practice guidelines are for location, language, usage etc.

  38. The post does show some creative ways people use the back-to-top links as it says, and while the coding may be pretty simple for experienced designers, you still have to admire the clever ways that some people use these links.

  39. nice one….

  40. Amazing Article! loved it Thanks for sharing this great stuff.

  41. Wow, a whole article on BackToTopLinks! Amazing!

  42. Hey thanks I was searching for this only :)

  43. Thanks for a useful material! I will try to use this information for development of my site.

  44. How do you get ride of the hash tag link in your back to top button?
    For example http://www.instantshift.com/#header
    is just http://www.instantshift.com

    how?

  45. http://www.survivor-magazine.com has a cool one which appears after you have scrolled down a little.

  46. thanks for the information.
    in wait behind the visit,: D

Leave a Comment Yourself

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>