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

Question

我有一个标记，当用户点击"查找骑手"时，浏览器应该将用户带到参与者在同一页面上的位置。但是当单击链接时，它只会将我带到一个在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 $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>

通常要解决此问题，我只需将URL放在链接"../site/SPageServer/？pagename=PWOS_SK_homepage#find"，这行得通，但是，如果人们使用虚荣 URL 登陆页面，这样做会破坏我的 URL 跟踪。

这是该页面的链接：

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

正如评论中提到的，最好使用简单的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 
});
})

这使您可以留在页面上而不会链接/弄乱跟踪数据，而无论向下多远，窗口都会滚动到正确的元素。希望这有帮助(即使您在我之前管理了它;)(

Answer 3

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

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

但你期望：

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

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