[Resolved] Anchor link

Home Forums Support Anchor link

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1316730
    jm1991

    Hi,

    I’ve enabled smooth scrolling and would like to anchor people down to certain sections of my page.

    As you can see from the URL I’ve submitted, I’d like to anchor people down when they click “REGEXMATCH a single word” to the relevant section. Ideally people would be anchored down to the h3 of each relevant section.

    There’s just one example there, but I’d implement for all 8 sections that Start with a h3 tag.

    I’ve tried playing around, but can’t make it work.

    Thanks

    #1317310
    Leo
    Staff
    Customer Support

    Hi there,

    This is what you are using:
    <a class="smooth-scroll" href="#a single word">REGEXMATCH a single word</a>

    You can’t have spaces in href so it would need so be something like this:
    <a class="smooth-scroll" href="#a-single-word">REGEXMATCH a single word</a>

    I don’t see any <h3> title with the matching id a-single-word?

    #1317731
    jm1991

    Hey Leo,

    I’ve tried a few different variations based on your recommendations, but I still can’t seem to make it work.

    #1317885
    David
    Staff
    Customer Support

    Hi there,

    create your link like so:

    <a class="smooth-scroll" href="#jump-title">Link to the jump title ID</a>

    Then your title should look like this:

    <h3 id="jump-link">The jump link position</h3>

    You must ensure your links href="#jump-title" matches the elements id="jump-link"

    #1318076
    jm1991

    Hi David,

    Thanks for your response. The heading section(s) I want to link to uses the ordered list and strong tags, so again, I’ve been playing around with the html without much success.

    This is the code snippet for an example heading section:

    <h3><ol><li><strong>An example heading</strong></li></ol></h3>

    Let’s say I want the ID name to be id="example-id">

    And whilst we’re at it, I’m going to write the html for the link that will anchor someone down to a heading, so that you can fix anything I’ve done wrong:

    <a class="smooth-scroll" href="#example-id">An example heading</a>

    Cheers.

    #1318121
    David
    Staff
    Customer Support

    If this is your link ( as above ):

    <a class="smooth-scroll" href="#example-id">An example heading</a>

    Then ID gets attached to any of the HTML you wish – but for readability its best added to the Heading:

    <h3 id="example-id"><ol><li><strong>An example heading</strong></li></ol></h3>

    #1318157
    jm1991

    Amazing! I did try the above before, but I must have done something wrong. Either way it now works.

    Keep up the awesome customer service guys!

    #1318199
    David
    Staff
    Customer Support

    Glad we could be of help

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.