“Back to top” links, a forgotten and rarely used link that helps users jump to the top of a given page. A visitor can achieve this effect by pressing the “Home” button on his or her keyboard; however, not every user is aware of that shortcut, and most probably use the vertical scroll bar in the browser for that purpose. Here is a very simple way and very easy to implement on your blog or website. This is intended for lengthy content websites. Its main purpose is for your site visitors not scroll manually up the top of your lengthy website. Just a click of a button and the page will then go to the very top of the website.
Some prefer using with script like JQuery, but why use (it slow down page loading) when it is possible with just few html code.
How to Create a “Top” Link?
To point the link to the top of the page, in most cases it is enough to define an empty anchor and put it right after the <body> tag:
<div id="footer">
<!-- footer goes here -->
<a href="#">Back To Top</a>
</div>
However, older browsers and, in particular, legacy browsers have problems interpreting this markup. An alternate solution is to use a real anchor that is explicitly defined and placed right after the <body> tag:
<body>
<a name="top"></a>
<!-- content goes here -->
<a href="#top">Back To Top</a>
</body>
Update: another method that avoids unnecessary markup and therefore should be preferred is to use the ID of the wrapper or header for the same purpose. For instance, if you use the div-container with the ID “wrapper”, you may use the following markup:
<body>
<div id="wrapper">
<!-- content goes here -->
<a href="#wrapper">Back To Top</a>
</div>
</body>
In fact, “Back to top” links are not always useful. For example, they may be unnecessary for websites that have rather short pages or articles. In such cases, there is no need for users to jump to the head of the page, because the whole page is completely visible anyway; if a “top” link is included on such pages, clicking on it will produce no effect, which is rather irritating. This is another reason why many designers don’t use it: the variety of currently available screen resolutions makes the “top” link unusable and unnecessary. That’s why using “Back to top” links for rather short pages is not a good idea. However, websites with long pages can offer visitors a nifty feature that saves time and avoids the need for vertical scrolling with the mouse.
Some prefer using with script like JQuery, but why use (it slow down page loading) when it is possible with just few html code.
How to Create a “Top” Link?
To point the link to the top of the page, in most cases it is enough to define an empty anchor and put it right after the <body> tag:
<div id="footer">
<!-- footer goes here -->
<a href="#">Back To Top</a>
</div>
However, older browsers and, in particular, legacy browsers have problems interpreting this markup. An alternate solution is to use a real anchor that is explicitly defined and placed right after the <body> tag:
<body>
<a name="top"></a>
<!-- content goes here -->
<a href="#top">Back To Top</a>
</body>
Update: another method that avoids unnecessary markup and therefore should be preferred is to use the ID of the wrapper or header for the same purpose. For instance, if you use the div-container with the ID “wrapper”, you may use the following markup:
<body>
<div id="wrapper">
<!-- content goes here -->
<a href="#wrapper">Back To Top</a>
</div>
</body>
In fact, “Back to top” links are not always useful. For example, they may be unnecessary for websites that have rather short pages or articles. In such cases, there is no need for users to jump to the head of the page, because the whole page is completely visible anyway; if a “top” link is included on such pages, clicking on it will produce no effect, which is rather irritating. This is another reason why many designers don’t use it: the variety of currently available screen resolutions makes the “top” link unusable and unnecessary. That’s why using “Back to top” links for rather short pages is not a good idea. However, websites with long pages can offer visitors a nifty feature that saves time and avoids the need for vertical scrolling with the mouse.
No comments:
Post a Comment