如何修复jquery滚动顶部动画?

问题描述 投票:-1回答:2

这段代码正在运行它会让我从头到尾回来,但它没有动画。有谁可以帮我这个?

$('.topScroll').click(function(){
        $("html, body").animate({scrollTop : "0px"},"fast");
});
javascript jquery animation jquery-animate
2个回答
0
投票

您可以尝试使用微秒减慢动画,如下所示:

$("html, body").animate({scrollTop : "0px"},1200);


0
投票

好吧,因为看起来你还有问题。您发布的代码 - 有效。好吧,既然你没有共享任何HTML,我只能假设你的确切标记和环境。

  • 将jQuery和您的代码放在关闭正文标记之前。
  • 如果需要使用Event.preventDefault()

工作范例:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>topScroll - example</title>
  <style>
    body { height: 300vh; }
    .topScroll { position: absolute; top: 200vh;}
  </style>
</head>

<body>

  <header id="top">
    <h1>Scroll down...</h1>
  </header>
  <a href="#top" class="topScroll">GO TO TOP</a>


  <script src="//code.jquery.com/jquery-3.1.0.js"></script>
  <script>
    $(document).on('click', '.topScroll', function(ev) {
      ev.preventDefault(); // Prevent browser doing default stuff on anchor/button click
      $("html, body").animate({scrollTop: "0px"}, 500);
    });
  </script>
  
</body>
</html>
© www.soinside.com 2019 - 2024. All rights reserved.