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.
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>
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”.
While compiling this list, it’s always a possibility that we missed some other great resources. Feel free to share it with us.