Question

我正在尝试滚动动画，但我的代码没有运气......

我有这个jquery

$(window).scrollTop(200);

现在想要给动画效果

尝试了这些但不起作用：

1. $(window).animate({scrollTop:200},1000);
2. $('body').animate({scrollTop: 200}, 1000);

我已经在这样的点击功能中应用了这个：

$('.goto').click(function(){
    $(window).scrollTop(485); // its working
});

现在我想实现动画效果而不是工作......

Answer 1

您必须使用$('html,body')代替$(window)，因为window没有scrollTop属性。

$('#scroll-bottom').on('click', function() {
  $('html, body').animate({
    scrollTop: 2000
  }, 2000); // for all browsers
  
  // $('html').animate({scrollTop: 2000}, 2000); // works in Firefox and Chrome
  // $('body').animate({scrollTop: 2000}, 2000); // works in Safari
})

#top {
  margin-bottom: 2000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="top">
  <button id="scroll-bottom">scroll</button>
</div>
<div>bottom</div>

Answer 2

如果你有html和身体风格高度：100％;它不起作用使用

height: auto;
min-height: 100%;

Answer 3

你只需要添加像素

$('body').animate({ scrollTop: "300px" }, 1000);

Answer 4

DEMO

<html>
function scrollmetop(dest){
    var stop = $(dest).offset().top;
    var delay = 1000;
    $('body,html').animate({scrollTop: stop}, delay);
    return false;
}

scrollmetop('#test');
<body>
    <div style="margin: 100px 100px 1000px 100px">
       <div id="test" style="width: 100px; height: 100px; border: 3px solid black;">target object</div>
    </div>
</body>
</html>

Answer 5

我正在使用Angular并且正在尝试向下滚动到已在ng-repeat中添加的项目。我将此代码放在$timeout内（零时间，只是为了在显示元素后实现），这足以让新项目具有offset().top ...

...但我认为添加数十个新元素的方式太多了，所以它没有滚动动画的处理能力。当我将超时时间设置为1秒时，它可以工作（尽管实际上在调用超时之前需要7秒）。

我的结论是，动画，平滑滚动在这里并不容易处理，而是我只是在使用

document.body.scrollTop = entry.offset().top

Answer 6

我也遇到了这个问题，并意识到问题出在CSS之内。

就我而言，我需要删除overflow-x：隐藏；通过HTML标签。

删除：

html {
    overflow-x: hidden;
}

然后，它起作用了。

希望对某人有帮助！

有效的无法工作的scrolltop

6 个答案: