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);
});

FIDDLE DEMO

Answer 3

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

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

防止奇怪的跳跃

避免使用scrollTop动画

保持锚状态

使用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);
    });
});

Javascript锚点目标scrollTo顶部不起作用

3 个答案: