带有 jquery-bbq 的基于 jQuery 哈希的导航使页面跳转

Question

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

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

http://www.tinytoepress.com/

然后点击左上角的“Store”链接，我去：

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

但是，我在标题下方向下滚动，这是不希望的。我想保持在顶部。

如果我向上滚动并单击“关于”，我会转到关于页面，但我再次向下滚动到标题之外。但是，如果我现在向上滚动到顶部并再次单击“商店”，我会在不向下滚动的情况下转到商店。

我正在使用简单的.show() 和.hide() 方法来控制通过导航点击设置的divs 的可见性。

任何想法如何防止在页面中跳转？

Answer 1

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

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

<div id="store">...</div> 将变为 <div data-page="store">...</div> 并且在 jQuery 端您将替换 $(location.hash).show() 为：

$("[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

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

Answer 3

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

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