Question

我有一个标记，当用户单击“查找骑手”时，浏览器应该将用户带到参与者在同一页面上的位置。但是，当单击链接时，它只带我进入在chrome，edge和firefox上找不到的页面（无法测试野生动物园）。

<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>

通常要解决此问题，我只需将网址放在链接“ ../site/SPageServer/?pagename=PWOS_SK_homepage#find”中即可，但是，如果有人登陆该页面，这样做会破坏我的网址跟踪使用虚荣网址。

这里是页面的链接：

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

这是由标题中的标签引起的。

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

3 个答案: