Question

嗨，我知道这个问题已被提出并得到了很多回答，但即便如此，我似乎无法弄清楚我哪里出错了。我正在尝试使用页面末尾的“返回顶部”按钮创建一个scrollTop动画，但它似乎不起作用。

代码如下：

HTML

<h2 class="bottom-border extra-bottom-margin"><a href="#" class="go-to-top">Back to top</a></h2>.

JQUERY

<script>
$(function(){
$(".go-to-top").click(function(event){
    event.preventDefault();
    $("html, body").animate({"scrollTop": "0px"}, 100);
})
});
</script>

网址为http://mike-griffin.com/about-me.html

任何帮助都将非常感谢。提前谢谢！

Answer 1

出现的滚动条属于.container元素，而不是正文。

删除css属性时观察行为：

overflow-x: hidden;

来自.container风格。

或者修复：

<script>

    $(".go-to-top").click(function(event){
        event.preventDefault();
        $(".container").animate({"scrollTop": "0px"}, 100);
    })

 </script>

Answer 2

您在此处发布的代码应该有效，但这不是您网站上的代码。

在网站上你有这个：

$(function(){
    $(".go-to-top").click(function(event){
        event.preventDefault();
        $("body").animate({"scrollTop": "0px"}, 1000);
    })
});

要使其有效，请将$("body")更改为$("html, body")。原因是浏览器兼容性 - 某些浏览器将滚动位置应用于document.documentElement（ html ），而其他浏览器将其应用于document.body（ body ）。

Jquery滚动到顶部动画

2 个答案: