/index

Ettudis (n) A graphic site offering freebies ranging from website designs, tumblr themes to textures and other graphic resources.

about
designer
contact

terms of use

content
resources

links
sitemap

tagboard

heart(s)

HTML/CSS “Back to the Top” Button

This tutorial requires you to be familiar with CSS and HTML. Okay, so what we’re going to be working with today is tags and a little bit of javascript, to make a button that will take the visitor to the top of the page when they press it. This is especially useful if you often have pages with a lot of content, it can allow easier navigation since the visitor does not need to scroll up. For an example, look to the bottom right corner of this page.

The HTML part only contains the following:

<div id="backtotop"><a href="javascript:scroll(0,0)">top</a></div>

This is put right before the tag. Remember to retype the quotations. The bolded text is editable (as long as in your CSS you change according to your tag, for example, if you changed the id to “top” then in the CSS, it should be #top, or if you used class instead of id, than it should be .backtotop in CSS).

After inserting that code into the HTML, you can add to the CSS to stylize the division. For example:

#backtotop{
position:fixed;
right: 30px;
bottom:0px;
width: 35px;
height: 40px;
padding:5px;
text-align:center;
background: #333333;
}

#backtotop:hover{
background: #121212;
}

#backtotop a{
font: 12px lucida console, trebuchet ms, sans-serif;
color: #ADADAD;
}

#backtotop a:hover{
color:#454545;
}

#BACKTOTOP
This directs how the position, size and background of the button.
position:fixed; must be this value if your want to keep it at the bottom of the page
right:20px; bottom:0px; you can change values or use “left” or “top” to adjust the position of the button.
width: 35px;height: 40px; this specifies the size of the button
text-align:center; this makes the text centered in the button
background:#333333; feel free to change colors or even add a image/pattern to this.

#BACKTOTOP:HOVER
This dictates how the button will look when you hover over it.

#BACKTOTOP A
This dictates how the text in the button will look

#BACKTOTOP A:HOVER
This dictates how the text in the button will look when you hover over it

Feel free to change/add values or properties according to your taste.

2 Comments »

  1. Pingback by xhtml css templates – ettudis – v16 » HTML/CSS “Back to the Top” Button | XHTML CSS - Style sheet and html programming tutorial and guides — September 17, 2011 @ 12:07 am

    […] is the original post: ettudis – v16 » HTML/CSS “Back to the Top” Button Share and […]

  2. Comment by Nik Phirke — February 11, 2015 @ 11:26 pm

    Hi, thanks for great tutorial. It’s working perfectly.

RSS feed for comments on this post. TrackBack URL

Leave a comment

*

2 Comments