Question

今天我问了一个已经解决的问题，但我面临一个很小的浏览器问题，当用户打开带有哈希标签的链接时，它会将它们转移到活动div但是我想让它们保持在最顶层这页纸所以问题是当有人通过这个示例链接访问我的网站时

mywebsite.com/mypage.html#page1

我不希望用户向下滚动到actived div，但希望将它们保留在页面顶部

这是我的代码

CSS：

.active {
    color:red;
}
#menu_container div {
    display:none;
}

HTML：

<div id="nav_tabbed"> 
    <a href="#show_page1" class='active'>Page 1</a> <!--This lets you add hash in the addressbar--> 
    <a href="#show_page2">Page 2</a>
</div>
<div id="menu_container">
    <div id="show_page1" style='display:block;'>Page 1</div>
    <div id="show_page2">Page 2</div>
</div>

JS：

$(function () {
    var hash = location.hash;//hash added in the browser.
    if(hash.length){
        $('#nav_tabbed a').removeClass('active');
        $('#menu_container div').hide();
        $('#nav_tabbed a[href*="' + hash + '"]').addClass('active');
        $('#menu_container div[id*="' + hash.slice(1) + '"]').show();
    }
    // below works for click of the anchors
    $('#nav_tabbed a').click(function(e){
        e.preventDefault();
        $(this).addClass('active').siblings('a').removeClass('active');
        $('#menu_container div').hide();
        $('#menu_container div[id*="'+this.getAttribute('href').slice(1)+'"]').show();
    });
});

以下是我的问题的参考链接：jquery tabs access from urls

Answer 1

也许

$(function(){
    document.location.hash = ""
})

可以工作：加载页面后，内部链接不会强制重新加载..

Answer 2

当您访问mywebsite.com/mypage.html#page1并且文档中有一个id为page1的元素时，您无法阻止浏览器向下滚动到该文件。最简单的解决方案是删除带有id的元素。丑陋的解决方案是在加载页面后滚动到页面顶部

 setTimeout(function() {
    window.scrollTo(0, 0);
 }, 0);

Answer 3

这样做的一种方法是添加模拟id，然后在文档就绪时更改为真实ID：

$("page1-mock").attr("id","page1");

或者你可以按照其他答案的建议去做，到目前为止看起来都是合法的。

Jquery让用户保持在页面上

3 个答案: