How do I create internal hyperlinks within the same page?

I have a page with a listing of courses at the top of the page and detailed descriptions of the courses below. I would like to be able to click on the course name and send the reader to the detailed description, and then back to the upper list.

  • Mindblaze
    • The Incredible Code Injector

    Hi,

    Welcome to the community!

    You can use internal links for this.

    For example, in page you can put an anchor like this:

    <a name="top"></a>

    and then call it by:

    <a href="#top">link to top</a>

    Similarly, if you want to point to a specific section on another page:

    <a href="http://mylink.com/somepage/#section-a">

    Which will take you to ‘section-a’ after that section is loaded.

    So you can do something like this:

    <ul>
    <li><a href="#course1">Course 1</a></li>
    <li><a href="#course2">Course 2</a></li>
    <li><a href="#course3">Course 3</a></li>
    </ul>

    and then where the content is:

    <a name="course1"></a>
    <h1>Course 1</h1>
    <p>This is the description</p>

    Hope it helps :slight_smile:

  • jbwelts
    • New Recruit

    Thanks. Now to reveal my true ignorance: for the code , do I insert the name of the class between the “s? And do I nsert the line just before the line where the course is initially listed?

    And then, for the code link to top, where do I put it and where in the line do I identify the course?

    Thanks!

  • Mindblaze
    • The Incredible Code Injector

    That is no problem. Everyone learns with bumps and hicups along the way :slight_smile:

    Your page will be in two sections.

    1. Where the courses are listed.

    2. Where the course description actually is.

    In the section where it lists the courses you can do something like this:

    I have copied a part from my previous post:

    <a name="top"></a>
    <ul>
    <li><a href="#course1">Course Name ABC</a></li>
    <li><a href="#course2">English</a></li>
    <li><a href="#course3">Mathematics</a></li>
    </ul>

    In the section where you actual course description will be:

    <a name="course1"></a>
    <h1>Course Name ABC</h1>
    <p>This is the course description...</p>
    <a href="#top">Go Back to Top</a>

    <a name="course2"></a>
    <h1>English</h1>
    <p>English is a very renouned language spoken.....</p>
    <a href="#top">Go Back to Top</a>

    <a name="course3"></a>
    <h1>Mathematics</h1>
    <p>Mathematics started with the numerals...</p>
    <a href="#top">Go Back to Top</a>

    Here href=”#course1″ corresponds to name=”course1″ so clicking that hyper link will bring the user down here.

    I hope it clarifies it a bit.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.