SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Guru
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    852
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Anchor Link to Top of Page

    I want a link that takes user to the top of the page they're on. I've looked at how other sites do this and they all seem to be placing an <a> tag just after the opening <body> tag to achieve this effect. Is this the only way this can be done? Is there know universal keyword that works cross browser? Unfortunately just using a # in the href attribute doesn't take the user to the top of the page in all browsers (works in firefox for example, but not IE).

    Can anyone shed some light on this?

    Cheers

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,788
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    If you have an id on the first tag after the body tag then you can target that - for example

    <body><div id="content">

    <a href="#content">
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Guru
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    852
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well yeah, that's what I was referring to in my original post. That seems to be the only solution, I was just wondering if maybe a lesser known keyword or possibly a workaround existed which would take a user to the top of a page without referencing an id associated with an element.

  4. #4
    SitePoint Guru tictike's Avatar
    Join Date
    Apr 2008
    Location
    Canada
    Posts
    863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm curious why you don't want to use the conventional method.

  5. #5
    SitePoint Guru
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    852
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I will if I have to, I was just looking for a better way if one existed.

  6. #6
    SitePoint Guru tictike's Avatar
    Join Date
    Apr 2008
    Location
    Canada
    Posts
    863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is just a random thought, but I suppose you could use a script that would return the scroll position top to 0. Ask about it in the js forum.

  7. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,788
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Most web pages these days should have an id at or very close to the top of the page that you can link to easily without having to add anything specific to create the anchor point.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  8. #8
    SitePoint Enthusiast David Coveney's Avatar
    Join Date
    Nov 2008
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use felgall's method. For JavaScript methods take a look at these two that I have in my bookmarks

    http://jdstiles.com/java/scrollers/statistopofpage.html - a sliding arrow follows you down the page.

    http://javascript.internet.com/navig...p-of-page.html - only displays if page exceeds browser height.

  9. #9
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Well yeah, that's what I was referring to in my original post. That seems to be the only solution, I was just wondering if maybe a lesser known keyword or possibly a workaround existed which would take a user to the top of a page without referencing an id associated with an element.
    The link or id method is safer-- unfortunately re-loading the page often forces people back to the top of the page. This sucks using JAWS because if you're on one of those silly AJAX pages where stuff gets updated and reloaded all the time, you keep getting sent back up to the top of the page.

    People also have their own keyboard shortcuts to the tops and bottoms of the page and you wouldn't want to interfere with those either.

    Plus with a link you can explicitly warn people: "this will take you back to the top of the page!" Getting jerked up unexpectedly to the top of the page is disorienting enough (like target="blank" opening new windows unexpectedly).

  10. #10
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Believe it or not, I'm starting to use an unordered list with an ID of "top" in my pages. That list contains two to three links - links that skip to the menu, content, sidebar, comments, or whatever (depending on the type of site). And yes, I do put this above the header (and use floats/margins to slide it into position).

  11. #11
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    heh Dan you mean like Mike has here at Lainey Feingold's site?

    I've started using them too, and making them appear on active/focus is also great, for the keyboarders who don't have Opera and are perfectly sighted. I usually give it a class or id called "access". It's a very nice idea-- tab through that page! : )


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •