如何在页面加载时禁用锚点跳转

Question

当我访问 my_site.com/page.php#something 时，滚动条的位置是带有这个特定哈希标记的元素而不是页面顶部的位置。

执行 window.scrollTo(0, 0); 并不能改变这个事实。那么怎么办呢？

编辑：还尝试了来自如何在加载页面时禁用锚点“跳转”？ 的已接受答案。似乎不再起作用。

- drake035

---

可能是重复的问题：如何在加载页面时禁用锚点“跳转”？ - Jake Reece

Answer 1

您需要做的是存储这个Hashtag以便稍后使用，然后删除它，这样浏览器就不会有任何可以滚动到的内容。

重要的是不要将代码部分放入$()或$(window).load()函数中，因为那时已经太晚了，浏览器已经移动到了标签。

// store the hash (DON'T put this code inside the $() function, it has to be executed 
// right away before the browser can start scrolling!
var target = window.location.hash,
    target = target.replace('#', '');

// delete hash so the page won't scroll to it
window.location.hash = "";

// now whenever you are ready do whatever you want
// (in this case I use jQuery to scroll to the tag after the page has loaded)
$(window).load(function() {
    if (target) {
        $('html, body').animate({
            scrollTop: $("#" + target).offset().top
        }, 700, 'swing', function () {});
    }
});

- Larzan

---

我在使用max-height overflow-y属性时遇到了一个FF的bug，当我在一个非常长的列表上使用它时，FF会滚动到隐藏节点所在的dom位置。这段代码仅使用了实际代码的前三行（不包括注释），并解决了我在FireFox上的问题。 - JQII

Answer 2

以下是HTML代码：

<a href="#test">link</a>
<div id="test"></div>

您可以使用以下代码来避免滚动到div元素，而是滚动到窗口顶部：

$("a").on("click", function(e) {
    e.preventDefault();
    window.scrollTo(0, 0);
});

编辑：

您可以尝试添加以下内容：

var firstVisit = true;
$(window).scroll(function() {
    if (firstVisit) {
        window.scrollTo(0, 0);
        firstVisit = false;
    }
});

- Dim13i

---

谢谢，但问题不是当我点击任何东西时，而是当我“访问”该页面时。 - drake035

@drake035 我已经编辑了答案。不知道这是否是最高效或最好的方法，但似乎能够工作。 - Dim13i

刚刚编辑了答案，因为滚动函数中的if条件有一个打字错误。如果可以，请再试一次。 - Dim13i