CODEWITHSUNDEEP
htmlanchor
SorryEh
SorryEh

Reputation: 928

Anchor link goes to page not found instead of section within same page

I have a piece of markup where when a user clicks on "find a rider" the browser is supposed to take the user down to where the participants are on the same page. But when clicking the link it just takes me to a page not found on chrome, edge, and firefox (can't test safari).

<div class="container-fluid blue">
    <div class="container text-center">
        <h1 class="white">Prairie Women on Snowmobiles</h1>
        <a href="#find" class="btn white main-cta elevation-z12" style="margin-bottom: 60px;">Find a Rider</a>
        <div class="row">
            <div class="col-lg-12" style="margin-bottom: 15px;">
                <div class="hero elevation-z12" style="background-image: url('../images/content/pagebuilder/PWOS_banner.jpg');"></div>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <h2 class="text-center">Prairie Women on Snowmobiles</h2>
            <p>A non-profit organization whose annual missions are provincial awareness events that are designed to focus attention on breast cancer and the recreation of snowmobiling as well as raise the much-needed funds for breast cancer research. Over the past 18 years we have raised almost $2.5 million for the cause. To learn more about Prairie Women on Snowmobiles <a href="../site/SPageServer/?pagename=PWOS_SK_About">click here</a>.</p>
        </div>
    </div>
    <div class="container">
        <div class="text-center">
            <h2>Riders</h2>
            <p>Meet our 2020 Riders</p>
        </div>
        <div class="events">
            <div class="event-display" id="find">
                [[S51:PWOS_SK_reus_riders]]
            </div>
        </div>
    </div>
</div>

normally to fix this I would just put the url in the link "../site/SPageServer/?pagename=PWOS_SK_homepage#find" and that works, however, doing that will break my url tracking if people land on the page using the vanity url.

Here's a link to the page:

https://secure2.convio.net/cco/site/SPageServer/?pagename=PWOS_SK_homepage

any help is appreciated.

thanks,

Upvotes: 0

Views: 68

Answers (3)

adr5240
adr5240

Reputation: 454

As mentioned in a comment, it would be better to do this with simple JS instead of playing with browser functionality. Without touching the HTML and assuming you have jQuery on the site, I would add something like the following in a script tag (obviously below both the <a href='#find'> and div#find)

jQuery("a[href='#find']").click(function() {
    event.preventDefault();
    jQuery("body, html").animate({ 
        scrollTop: jQuery("#find").offset().top 
    });
})

This allows you to stay on the page without linking away/messing up tracking data while the window will scroll to the proper element no matter how far down. Hope this helps (even though you managed it before me ;) )

Upvotes: 0

mathertel
mathertel

Reputation: 179

When you hover the mouse over the link you see:

https://secure2.convio.net/cco/site/#find

but you expect:

https://secure2.convio.net/cco/site/SPageServer/?pagename=PWOS_SK_homepage#find

This is caused by the tag in the header.

Upvotes: -1

Quentin
Quentin

Reputation: 944441

Your page starts with <base href="https://secure2.convio.net/cco/site/" /> so when you click on href="#find" it resolves to https://secure2.convio.net/cco/site/#find.

You need to write your URL relative to the base URL, not the current page.

Upvotes: 2

Related Questions