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

【问题标题】：Javascript anchor target scrollTo top don't workJavascript锚目标滚动到顶部不起作用
【发布时间】：2013-09-17 13:26:38
【问题描述】：

信息

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

【问题讨论】：

标签： javascript jquery css scroll page-jump

【解决方案1】：

当你都在使用 jQuery 时，我会这样做

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

【讨论】：

使用 :target 伪类似乎是解决 OP 问题的简单方法

【解决方案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

【讨论】：

它不像以前那样工作了。点击后绿色现在仍然是绿色。它之前变成了红色。

【解决方案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);
    });
});

【讨论】：

gr8！我建议你接受你自己的答案。这样人们就可以看到问题实际上得到了的回答，并且还可以从您的经验中学习。因为它是“受信任的”/被接受的。