Question

我在www.tinytoepress.com上有一个网站，它使用基于#hash锚标记的导航，使用jQuery和jquery-bbq插件。它工作得很好，除了有时它会导致页面跳转到标题下方，就像它转到实际的<a name...>标记一样。但是没有这样的标签。

例如，如果我访问主页，请使用OS X上的Chrome：

http://www.tinytoepress.com/

然后点击左上角的“商店”链接，我转到：

http://www.tinytoepress.com/#store

但是，我在标题下方滚动，这是不希望的。我想保持在最高位置。

如果我向上滚动并单击“关于”，我会转到“关于”页面，但我再次向下滚动标题。但是，如果我现在向上滚动到顶部并再次单击“存储”，我会转到存储而不向下滚动，这是所希望的。

我使用简单的.show()和.hide()方法来控制从导航点击设置的div的可见性。

如何防止在页面中跳跃？

Answer 1

更改哈希地址时的默认浏览器行为是跳转到表示哈希的id。例如：http://example.com/some-page#store将在页面上搜索标识为store（<div id="store">...</div>）的元素。如果找到，页面将跳转到那里。

我建议您设置自定义data-attr属性，而不是设置ID属性。

<div id="store">...</div>将成为<div data-page="store">...</div>，在jQuery方面，您将$(location.hash).show()替换为：{/ p>

$("[data-page='" + location.hash.substring(1) + "']").show()

代码如下所示：

$("a").on("click", function () {

    // get the clicked link
    var $clickedLink = $(this);

    // get the url
    var url = $clickedLink.attr("href");

    // we search the hashes
    if (url[0]  !== "#") { return; }

    // change the location using js
    location.hash= url;

    // hide all pages
    $("[data-page]").hide();

    // show the current page
    $("[data-page='" + url.substring(1) + "']").show();

    // prevent the default browser behaviour (jumping)
    return false;
});

JSFIDDLE

Answer 2

抱歉，无法复制您的问题（使用Google Chrome 31.0.1650.63运行OS X 10.9）。你的奇怪跳跃的一个可能的解释：有时，当加载和插入新内容时，不断变化的内容长度也起作用...

Answer 3

我认为这可能与每次点击导航时此代码添加和删除iframe的方式有关。我发现如果一个允许iframe完全加载页面跳转不会发生。在我的chrome工具中，如果我删除了iframe，那么跳跃就会停止。我可能在这里错了，但如果您在点击导航时只是显示和隐藏页面内容，则不需要将iframe存储在Jquery对象中，然后将其放回到相同的div中容器。当iframe被放回Iframe内的所有调用以再次发生js资源时。当用户单击其他nav元素时，这些调用会中断。查看chrome工具的网络选项卡，您将在点击所有导航后看到资源检索被取消而另一个在状态列中有206个部分内容。我的建议是加载iframe一次，然后在需要时隐藏内容。我希望这是有益的好运。

 b = $("#movieCtn").html(), console.log("html: ", b), $("#movieCtn").html(""),    console.log(b,$("#movieCtn").html()), $("#movieCtn").html(b))

使用jquery-bbq的jQuery基于散列的导航使页面跳转

3 个答案: