8

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

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

http://www.tinytoepress.com/

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

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

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

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

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

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

4

3 回答 3

3

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

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

<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

于 2013-12-20T13:24:44.277 回答
2

我相信这可能与每次单击导航时此代码如何添加和删除 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))
于 2013-12-20T20:12:53.410 回答
2

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

于 2013-12-17T13:37:47.113 回答