Bootstrap Templates Bundle

Friday, December 28, 2012

Adding A Floating “Back To Top” Button

Back to Top button or link is a link that sends your viewer to the top of page once clicked. This will help your readers navigate better, especially so if you have long pages. This link is usually located at the bottom of page or in the footer area.


To see example look on the right side of my page 
Here are the steps:
  1. Login to your Blogger account.
  2. Go to Dashboard > Design > Edit HTML.
  3. Back up your template.
  4. Insert the following code immediately before the </body> tag in your HTML. 
    <a style="position: fixed; bottom:5px;left:5px;" href="#" title="Back to Top"><img style="border: none;" src="YourButtonUrl"/></a>
    Replace YourButtonUrl with the link to your button or icon.
  5. If you prefer to use text instead of an image, use this code: 
    <a style="position: fixed; bottom:5px;left:5px;" href="#" title="Click to go to top">YourTextHere</a>
    Replace YourText with your own wording.
  6. You can change the location of the button / link by changing the values of this code:
    bottom:5px; left:5px;

2 comments:

Murphy - Home Maintenance & Repair Service HTML Template

Murphy is a handyman repair service Bootstrap HTML Template. It is ideal for either all-rounders or professional teams to introduce the...