Jump Links

Discussion in 'HTML & Website Design' started by kertoon, Sep 29, 2015.

  1. #1
    I am trying to do so-called "jump-link" like in Wikipedia, within the same page in Blogger. I have problem jumping back to the exact location which I initially clicked on. It just jumps back to the top of the post.
    The code at top link: <a href="#link1">
    The code at the bottom link (to jump back to the top link): <a href="#"name="link1">
     
    Solved! View solution.
    kertoon, Sep 29, 2015 IP
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    You're doing it wrong. The item you're linking TO doesn't have to be a link - something like this:
    
    <p id="jumphere">This is where you end up</p>
    
    Code (markup):
    and then the link to actually jump there:
    
    <a href="#jumphere">Jump to where you wanna end up</a>
    
    Code (markup):
    It is of course possible to do it both ways, but then what you need to do is this:
    
    <p id="jumphere"><a href="#backuptop">Back to top</a> This is where you end up</p>
    
    Code (markup):
    and this would be the link:
    
    <a href="#jumphere" id="backtotop">Jump to where you wanna end up</a>
    
    Code (markup):
    You can of course have the id directly on the a-link on the bottom, you don't have to wrap it in a <p>-tag or anything like that. You do NOT use "name"-attributes on a-tags in modern HTML coding.
     
    PoPSiCLe, Sep 29, 2015 IP
  3. kertoon

    kertoon Well-Known Member

    Messages:
    187
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    133
    #3
    I am bit confused here. Could you please tell me precisely which code for the "first" link and which is for the "second" link?
    "Second" link means the location where it jumps to.
     
    kertoon, Sep 29, 2015 IP
  4. #4
    Really? The text on the links didn't give it away? *shakes head*
    First link (the one that takes you to whereever you want to go on the page)
    
    <a href="#jumpthere">This takes you to...</a>
    
    Code (markup):
    And this would then be the second item on the page, where you're jumping to:
    
    <p id="jumpthere">... here</p>
    
    Code (markup):
     
    PoPSiCLe, Sep 29, 2015 IP
  5. kertoon

    kertoon Well-Known Member

    Messages:
    187
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    133
    #5
    Yes, I got it. There was a typo error in your earlier reply "backtotop" and "backuptop".
    A big thank you for your quick reply.
     
    kertoon, Sep 29, 2015 IP
  6. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #6
    Ah, sorry, typed it on my phone :D Yes, I see that there was an error. Hope you got it to work.
     
    PoPSiCLe, Oct 1, 2015 IP