Creating internal links within pages

  • Hi
    I have a website that uses WordPress. It is not a blog or similar so maybe what I am trying to do does not fit easily within WordPress.

    I have a list of local installers here and I want to create a list or table with a series of names that link to specific lines of text on the same page. For example, Northland, Auckland, Rotorua and when the person clicks on this name they are taken to the relevant section on the same page.

    If I need to do stuff to the “id” please can you tell me where I find this code to edit. I’m a basic user.
    Cheers, Marcus

Viewing 7 replies - 1 through 7 (of 7 total)

  • Hi Marcus,

    Well the easiest way to do this, from the link you showed. Put yourself in text view not editor view (the right tab while editing page). I will try to make a simple example.

    1) on top of this page put a list of links by county/region/city like this:

    Northland –> put <a href="#northland">Northland</a>
    Rotorua, Taupo & Bay of Plenty –> put <a href="#rotorua">Rotorua, Taupo & Bay of Plenty</a>

    2)

    Pass a few lines to make spaces, then for example put:

    <p id=”northland”>
    Just A Plumber Kaitaia
    Tel: 09 406 2332
    564D State Highway 10
    Taipa Shopping Center
    </p>

    <p id=”rotorua”>
    Just A Plumber Rotorua
    Tel: 09 406 2332
    564D State Highway 10
    Taipa Shopping Center
    </p>

    3) Save, and check, this should give you a basic example of using internal links on same page.

    Tell me if you have problems, this is only basic html

    Digico, in “strict” HTML files, instead of the

    <p id="northland">

    you would do

    <a name="northland></a>

    to create an Anchor bookmark. Does that also work? (I don’t have easy access to any of my pages that are long enough to really tell…). That seems the better way to do it as you could then put the anchor bookmark tab anywhere in the page (i.e. middle of paragraph, etc).

    Thread Starter rottenmarcel

    (@rottenmarcel)

    That’s awesome, thank you so much!

    One thing – it scrolls down so the name of the area is obscured on the screen. Any idea how I can get it to scroll to the top of each section? I’ve put the initial code <p id=”northland”> before each heading. Have a look if you want, I’ve published it.

    I’ve just realised that I can delete all the extra spaces between lines here as well which is great because I couldn’t find the paragraph style tool.
    Thanks!

    1/ Both works Woalmoore, but for information all mobile and desktop will understand both. I tend to say strict is a bit too strict as for W3C standards now – not to mention a bit useless because HTML5 has no “strict” attribute.

    2/ Nice Rotten, I check I write back in a minute.

    Ok, well your top menu is made that way – to be in top of every content on the page.

    You can correct that by CSS rules, the simple code i gave you will put the browser right on the line of the first line of the paragraph (<p> tag).

    After there are many webdesign tricks to do what you want, but there are quite complex by using JS or so.

    You could also edit your header.php file in your template, tweak something like <body id="topofthepage"> instead of <body>. Then call it inside of your page like a text link <a href="#topofthepage">back to top</a>

    Your floating menu is on top of the Northland title. When you go an internal link, it scrolls down such that the “target” is at the top which in your case scoots is under that floating menu.

    If you add a margin-top: 100px; style to your heading there it will keep it below that floating menu but there will be extra white space within the page.

    Hmmm…

    Yes good suggestion MarkRH, in a css style,
    You could also play with z-index on top navigation menu, but again that involves js to tweak css on the fly while dragging down.

    Have fun with WordPress,

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Creating internal links within pages’ is closed to new replies.