锚 link 转到未找到的页面而不是同一页面中的部分

Question

我有一段标记，当用户点击 "find a rider" 时，浏览器应该将用户带到参与者在同一页面上的位置。但是当单击 link 时，它只会将我带到 chrome、edge 和 firefox（无法测试 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 .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>

通常要解决此问题，我只需将 url 放入 link "../site/SPageServer/?pagename=PWOS_SK_homepage#find" 即可，但是，如果人们使用虚荣 url.

登陆页面，这样做会破坏我的 url 跟踪

这里是 link 页面：

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

感谢任何帮助。

谢谢，

Answer 1

您的页面以 <base href="https://secure2.convio.net/cco/site/" /> 开头，因此当您单击 href="#find" 时，它会解析为 https://secure2.convio.net/cco/site/#find。

你需要写你的 URL 相对于基础 URL，而不是当前页面。

Answer 2

当您将鼠标悬停在 link 上时，您会看到：

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

但你期望：

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

这是由 header 中的标记引起的。

Answer 3

如评论中所述，最好使用简单的 JS 而不是玩浏览器功能。在不触及 HTML 的情况下，假设您在网站上有 jQuery，我会在脚本标记中添加如下内容（显然在 <a href='#find'> 和 div#find 下方）

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

这使您可以留在页面上而无需链接 away/messing 向上跟踪数据，而 window 将滚动到正确的元素，无论向下多远。希望这会有所帮助（即使你比我先成功了 ;) )

锚 link 转到未找到的页面而不是同一页面中的部分

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

html

anchor