back to top link every page

  • I google this question and get tons of hits with no viable answer. I want to put a back to page link (no button) at the bottom of every page that hrefs back to the top. I’d like to place it right above the footer on the far right. I have the hyper ref down using:

    <a href="#">Back to Top</a>

    but getting it to:

    1. put the link where I want
    2. on every page

    seems to require some css playing. Here’s a pic of where the link is and where I’d like to move it to.

    Here’s a link to my site

    Thank you in advance.

Viewing 6 replies - 16 through 21 (of 21 total)

  • Esmi . the . before is for classes and the # is fir id,

    Lets say a class you will use in multiple places. an and id is an unique identifier of a single element in this case the go to top button. Beacuse there is only one . now if it was an h2 you can use that multiple time accross the same page or a <p> .. then use classes to style them . . If you notice on the code you hava .. <p id=”totop”>
    <and some where in there there is also a <div class=”site-info”>

    The css file , style.css uses these id’s and class to know what find them in the html code .. in the html code you also have lots of style=”blabla : blabla”
    the css file simply is assigning all those styles to the html elements.
    so :

    <p id=”totop”> —> in the css is —> p#totop or just #totop
    <div class=”site-info”> —> in the css is —> div.site-info , or just .site-info

    Now to make your life easier .
    Download chrome > install it > delete IE from you computer . or any computer you come accros . ( the world will thank you for that kind action ) and then once you have chrome installed fire up your webpage and right click on the go to top button and do inspect element.

    A very cool window will pop up that will allow you to edit the css so you can test what works ,,, figure out how to use that window and you are on a good way to getting things done … U can also use safari . or firefox’s firebug ..

    Nothing wrong with absolute positioning if you know what you are doing. and IE .. my god .. can wait for that to die once and for all .. what a cancer .

    If it gets too anoying just send me the link of the page you are working on and I will have a look at it .
    and post the css right css here so you can added to you style.css

    Cheers mate .. ??

    PS: Dont take the deleting IE thing too seriously. ??
    Insted of using the position absolute , just put the <p id=”totop”> inside the <footer> and in give ir a float: right ; and the need widht:

    #totop {float:right;width:???}

    Why dont you use the plugin back to top

    Just take a Url of page where you want to use this and give this link
    Back to Top

    like that Back To Top

    Hi, I know it’s not an answer to your question and you didn’t ask for any advice, but keep in mind sometimes it’s good to weight the actual need for a feature you want to add and the time at your disposal vs your desire to have it ?? I think in your instance you’ve committed time for a feature that might not be needed yet, since most of your pages are actually really short, no more than 1 scroll away from the top (depending on the resolution of course). Maybe something simpler that might help to reduce scrolling is reducing the empty space above the header, and the header heght itself.

    Good luck with the site!

    the . before is for classes and the # is fir id

    I’m sorry but what does this have to do with anything? FWIW, I’ve been playing with CSS since well before 2000 – most of that time as a professional developer.

    And you’ll find that Firebug is far more powerful than Chrome’s Inspector tool. It’s what Chrome’s Inspector tool wants to be when it grows up. ??

Viewing 6 replies - 16 through 21 (of 21 total)
  • The topic ‘back to top link every page’ is closed to new replies.

Tags