Creating a link to a specific part of a web page.

Discussion in 'IT & Internet' started by justintime, Sep 3, 2020.

  1. justintime

    justintime UKBF Regular Free Member

    591 80
    Hi, I wondered if someone could help me. I have used an online website template and amended it to suit. It's one of those scrolling ones and in the menu you can click on a heading and it scrolls down to the relevant section. There is also a dropdown heading to add additional pages.

    When you click on an additional page, then click on (say) About Us, it simply adds #about to the html page you're on. I have tried <a href="index.html#about"> but that doesn't work. Any suggestions please?
     
    Posted: Sep 3, 2020 By: justintime Member since: Apr 12, 2009
    #1
  2. Wayne Smyth

    Wayne Smyth UKBF Contributor Free Member

    38 16
    This may not be your issue, but it's worth checking for starters.

    The "#about" bit needs to marry up precisely with the html id of the bit of the page which it needs to scroll to.

    So check that your page has a html element which has an id of "about" (without the hash). If it doesn't add it in and see if it works.

    You can also check this by opening the developer tools window (F12), and typing:

    document.getElementById('about')

    in the console. If it returns null then that's your problem
     
    Posted: Sep 3, 2020 By: Wayne Smyth Member since: Nov 11, 2019
    #2
  3. zigojacko

    zigojacko I say it how it is Full Member - Verified Business

    3,658 1,185
    As per above.

    Create a section on the page with the relevant ID or link to existing ID.

    <div id="id">
    Your markup here...
    </div>

    Then if you create a anchor link (link in your menu) like the below, it will jump to the 'id' section.

    <a href="#id">ID</a>

    You can read more on this here.
     
    Posted: Sep 3, 2020 By: zigojacko Member since: Dec 7, 2009
    #3
  4. UKSBD

    UKSBD Not a real duck Staff Member

    10,170 1,995
    If you are coming from *another page* you need to make sure you are linking to the page with the about section on it.

    Use an absolute URL 1st to test it.
     
    Posted: Sep 3, 2020 By: UKSBD Member since: Dec 30, 2005
    #4
  5. justintime

    justintime UKBF Regular Free Member

    591 80
    I'm not sure what I did wrong, but I followed UKBSD's advice then reduced it to index.html#about etc and all working now. Many thanks to all who responded.
     
    Posted: Sep 4, 2020 By: justintime Member since: Apr 12, 2009
    #5