Javascript 锚点目标滚动到顶部不起作用

Question

信息

我使用目标来更改一些 CSS。这意味着我需要目标的行为才能继续工作。 preventDefault可能不是一种选择？

问题

我希望window.scrollTo(0, 0);可以使页面跳转到顶部。这并没有发生。为什么不呢？溶液？

斯菲德尔

你可以在jsfiddle上尝试一下。向下滚动以查看演示。我添加了填充。

.HTML

<a href="#test">Test</a>
<div id="test">My content</div>

Javascript （jQuery）

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

.CSS

div {
    background: green;
}
#test:target {
    background: red;
}
a {
    padding-top: 1900px;
    display: block;
}

Answer 1

当你们准备好使用 jQuery 时，我会这样做

$("a").on("click", function(e){
    $('html, body').animate({scrollTop:0}, 'fast');
});

Answer 2

您需要

在此处使用.preventDefault()方法来取消单击的默认操作（导航）。

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

更新

$("a").on("click", function (e) {
    e.preventDefault();
    $('#test').css('background-color', 'red')
    window.scrollTo(0, 0);
});

小提琴演示

Answer 3

我自己回答这个问题。我找到了一种在我尝试过的所有情况下都有效的解决方案。其他答案都没有。

http://jsfiddle.net/8dmtN/6/

防止奇怪的跳跃

• 避免动画滚动顶部

保持定位点状态

• 使用window.location重定向它。
• 然后滚动到顶部。

jQuery

jQuery(document).ready(function($) {
    $("a").on("click", function(e){
        e.preventDefault();
        var hash = $(this).attr('href');
        window.location = hash;
        window.scrollTo(0, 0);
    });
});