我在www.tinytoepress.com上有一个网站,它使用基于#hash锚标签的导航,使用jQuery和
jquery-bbq插件.它工作得很好,除了有时它会导致页面跳转到标题下方,就好像它会转到实际的< a name ...>标签.但是没有这样的标签.
例如,如果我访问主页,请使用OS X上的Chrome：
然后单击左上角的“Store”链接,我转到：
http://www.tinytoepress.com/#store
但是,我在标题下方滚动,这是不希望的.我想保持在最顶层.
如果我向上滚动并单击“关于”,我会转到“关于”页面,但我再次向下滚过标题.但是,如果我现在滚动到顶部并再次单击“存储”,我会转到存储而不向下滚动,这是所需的.
我使用简单的.show()和.hide()方法来控制从导航点击设置的div的可见性.
任何想法如何防止在页面中跳跃？
解决方法
更改哈希地址时的默认浏览器行为是跳转到表示哈希的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;
});
