Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    Feb 2010
    Posts
    229
    Thanks
    25
    Thanked 0 Times in 0 Posts

    Back to top bookmark puzzle

    I've noticed that the last few times I've decided to include a 'back to top' link at the foot of my blog page, I haven't needed to include the <a name> tag.

    I just find the footer in the code and put:

    Code:
    <a href="#top">Back to top</a>
    And it works just fine. How is this so, please? It's not that it's simply refreshing the page or anything. It actually 'jumps' just like a bookmark should.
    Last edited by OurJud; 04-02-2014 at 10:11 PM.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,790
    Thanks
    6
    Thanked 1,022 Times in 995 Posts
    It jumps to the top if there is no element with a matching ID to which it could jump. It would just as well jump to the top if you were writing <a href="#hello_world">, or even just <a href="#">. However, technically this bears accessibility problems because that link isn’t referring to anything. You should always have an element with an ID at the top to which you refer; this could even be the global page container.

    And by the way: a named anchor is invalid HTML since the name attribute has been deprecated for all elements except form controls for at least 10 years now. You should always use IDs instead, and you can reference any element with an ID, not just anchors.
    Last edited by VIPStephan; 04-02-2014 at 06:26 PM.

  • #3
    Regular Coder
    Join Date
    Feb 2010
    Posts
    229
    Thanks
    25
    Thanked 0 Times in 0 Posts
    OK, thanks very much, Stephen, I'll go rectify that now.

  • #4
    Regular Coder
    Join Date
    Feb 2010
    Posts
    229
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Right, so I did that, but now it's not jumping right to the very top of the page (it's about 4px short)

    Right after </head> I have:

    Code:
    <body id="killing-sheep">
    And then in the footer I have:

    Code:
    <a href='#killing-sheep'>Back to top</a>
    But as I say, it now stops short of the top of the page by about 4px ??

    See for yourself: http://killingsheep.blogspot.co.uk/

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    sounds like your page has a 4px margin on the body
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #6
    Regular Coder
    Join Date
    Feb 2010
    Posts
    229
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by felgall View Post
    sounds like your page has a 4px margin on the body
    Nope, because when I click the home button it headbutts the top of the browser window as it should.

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,790
    Thanks
    6
    Thanked 1,022 Times in 995 Posts
    No, your #search has a top margin of 1.5em which, by the rules of collapsing margins, bleeds out of the wrapper and body, and moves the whole site down a bit.

    And by the way: You don’t even need to assign an ID to the body just for the “back to top” link, you could as well use #wrapper, since it’s already there anyway.

  • #8
    Regular Coder
    Join Date
    Feb 2010
    Posts
    229
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Ah, I see.

    Well in that I like that slight margin between the search box and the top of the browser window, is there a way to make the back to top link skip this margin?

  • #9
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Put the margin on the wrapper rather than the body.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #10
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,790
    Thanks
    6
    Thanked 1,022 Times in 995 Posts
    Or rather, remove the top margin from the search and add it as top padding to the wrapper.

  • #11
    Regular Coder
    Join Date
    Feb 2010
    Posts
    229
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by felgall View Post
    Put the margin on the wrapper rather than the body.
    Quote Originally Posted by VIPStephan View Post
    Or rather, remove the top margin from the search and add it as top padding to the wrapper.
    Thank you both very much. That's done the trick!


  •  

    Posting Permissions

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