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

Question

信息

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

问题

我预计这window.scrollTo(0, 0);将使页面跳转到顶部。那没有发生。为什么不？解决方案？

jsfiddle

您可以在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);
    });
});