Question

所以现在我有一个允许锚定的脚本，但它只适用于我目前所在的页面。

    $('.menu a').click(function(){
        var question = this.innerHTML;
        var answer = $.find('dt:contains(' + question + ')');
        $('html, body').animate({
            scrollTop: $(answer).offset().top
        }, 200);
        return false;
    });

  <div class="menu">
        <div>
            <h3 class="heading"><a href="/about">About</a> <span class="expand">+</span></h3>
            <ul class="subheader">
                <li><a href="/about">How Can You Help?</a></li>
                <li><a href="/about">How can I submit a show?</a></li>
                <li><a href="/about">Who are we?</a></li>
            </ul>
        </div>

        <div>
            <h3 class="heading"><a id="contact" href="contact">Contact</a> <span class="expand">+</span></h3>
            <ul class="subheader">
                <li><a href="contact">Email</a></li>
                <li><a href="contact">On Site</a></li>
                <li><a href="contact">Social Media</a></li>
            </ul>
        </div>
</div>

我想弄清楚的是如何改变我当前的脚本，以便我可以将自己固定在下一页的正确位置。

例如，我目前在我的“关于”页面上，但我点击了菜单中的“电子邮件”。我想要发生的是页面将自己重定向到联系页面，其锚点本身就是电子邮件所在的位置。现在，它只是把我放在页面顶部。

我试图不使用几个id来做这个，因为这些不是我唯一的页面，所以最好不要让超过30个id才能让它工作。我想这是我的最后一招。

Answer 1

问题不明确，但我假设你有一个javascript函数，它接受一个字符串并找到发送用户的正确位置。在这种情况下，您可以使用页面的当前哈希值在页面加载上运行：

$(function() {
    if (location.hash) {
        var question = location.hash;
        var answer = $.find('dt:contains(' + question + ')');
        $('html, body').animate({
            scrollTop: $(answer).offset().top
        }, 200);
    }
});

您的电子邮件链接可能如下所示：

<li><a href="contact#email">Email</a></li>

或者，如果您想使用<a>内容作为哈希：

<li><a href="contact">Email</a></li>
...
$(function() {
    $('a').each(function(){$(this).attr('url',$(this).attr('url')+'#'+$(this).text())});
});

这会将该链接转换为：

<li><a href="contact#Email">Email</a></li>

Answer 2

只做...

<li><a href="contact#email">Email</a></li>
<li><a href="contact#onsite">On Site</a></li>
<li><a href="contact#social">Social Media</a></li>

然后在您正在谈论的页面上设置锚点

喜欢这样......

//email section to link to
 <div id="email"></div>
//onsite section to link to
 <div id="onsite"></div>

锚定不同的页面

2 个答案: