1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How can I create jump links in same page?

Discussion in 'HTML & Website Design' started by Md.Saddam Hossain, Sep 15, 2019.

  1. #1
    Hi,

    I want to create a list of items and while people click on the list, it will take user to the list of item in the same page's content.

    I had tried to create it with this way:
    https://www.w3schools.com/code/tryit.asp?filename=G82AEOGIT7DZ

    But the problem is about scrolling. When I click on the top link to send it bottom, it didn't go fully. Besides, the bottom class # link works perfectly.
    SEMrush
    Can anyone please help me to fix out? Or is there any more easy to create jump links?

    Advance Thanks :)
     
    Md.Saddam Hossain, Sep 15, 2019 IP
    SEMrush
  2. denis bayly

    denis bayly Member

    Messages:
    65
    Likes Received:
    16
    Best Answers:
    5
    Trophy Points:
    35
    #2
    Hi there Md.Saddam,

    does this help...

    
    <!DOCTYPE HTML>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    
    <title>top to bottom</title>
    
    <!--<link rel="stylesheet" href="screen.css" media="screen">-->
    
    <style media="screen">
    body {
        background-color: #f9f9f9;
        font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
     }
    p { 
        margin-bottom: 62.5em;
     }
    
    </style>
    
    </head>
    <body> 
    
     <h1 id="top">Page information goes here</h1>
    
     <a href="#bottom">go to the bottom</a>
    
     <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
      Curabitur sit amet sem sed libero bibendum tempus faucibus       
      quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor 
      nibh, posuere ac lorem ut, suscipit tincidunt leo. Duis 
      interdum justo ac justo vehicula consequat. Curabitur et 
      volutpat nibh. Phasellus rutrum lacus at dolor placerat 
      feugiat. Morbi porta, sapien nec molestie molestie, odio 
      magna vestibulum lorem, vitae feugiat est leo sit amet 
      nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac 
      magna sed, pretium commodo odio. Sed porttitor augue velit, 
      quis placerat diam sodales ac. Curabitur vitae porta ex. 
      Praesent rutrum ex fringilla tellus tincidunt interdum. 
      Proin molestie lectus consectetur purus aliquam porttitor. 
      Fusce ac nisi ac magna scelerisque finibus a vitae sem.
     </p>
    
     <a id="bottom" href="#top">go to the top</a>
    
    </body>
    </html>
    
    Code (markup):

    coothead
     
    denis bayly, Sep 16, 2019 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,976
    Likes Received:
    1,635
    Best Answers:
    233
    Trophy Points:
    515
    #3
    See, THIS is why I call W3Fools predatory web-rot created by people unqualified to tell others how to write HTML. <a name=""> as the targets as if it's still 1997? /FAIL/ Hard.

    W3Schools -- much like other predatory scam artist BS such as bootstrap and jQuery -- can teach you nothing other than how NOT to build a website. Some advice? Try MDN.

    https://developer.mozilla.org/en-US...o_HTML/Creating_hyperlinks#Document_fragments

    Which is pretty much what @coothead's example is doing.
     
    deathshadow, Sep 16, 2019 IP