0

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

    $('.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 只是为了让它工作不是最好的主意。我想这是我最后的手段。

4

2 回答 2

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>
于 2013-06-21T21:20:48.073 回答
0

做就是了...

<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>
于 2013-06-21T21:18:14.723 回答