Jquery scrollTop 在滚动时确实打破了布局答案

【问题标题】：Jquery scrollTop does break the layout, while scrollingJquery scrollTop 在滚动时确实打破了布局
【发布时间】：2016-07-05 05:09:48
【问题描述】：

我的 jQuery scrollTop 函数有问题。每次，当有人点击我的“返回顶部”按钮时，布局会崩溃，而动画正在运行。现在它周围有特殊代码，只是一个 button.scrollTop(0);

布局的样式是边框布局。

感谢您的帮助

【问题讨论】：

你能把你的代码加到 JS fiddle 或者 PHP fiddle 让我们看到吗？

标签： jquery html css layout scrolltop

【解决方案1】：

至于我从您的解释中可以看出，您希望在单击按钮后滚动到顶部。但是你不能直接将scrollTop添加到按钮上。

我希望你使用类似的东西：

$('button').click(function(){
    $('html').scrollTop(0);
})

这能解决你的问题吗？

【讨论】：

这是我以前做过的方式。它失败了。但请阅读下面的正确工作修复；）

【解决方案2】：

只是为了测试函数本身是否没有导致问题，尝试在你的 body 标记的最顶部放置一个空 div

</head>
<body>
<div id="test"></div>
...
...
<button id="test-button">Scroll to top</button>
</body>

然后在一个 JS 文件中尝试这样做

var topButton = document.getElementById("test-button");
var test = document.getElementById("test");
topButton.onclick(function(){
     test.get(0).scrollIntoView();
});

这不是平滑滚动，但如果这有效，那么您的 HTML 标记的其余部分可能没问题。

【讨论】：

对不起，我没有测试它，因为我已经找到了一个可行的解决方案：阅读下文

【解决方案3】：

这是我的工作解决方案：

$('button').click(function(){
    $('html, body').animate({
        'scrollTop': '0px'
    });
}, 300);

问题是由即时滚动到顶部引起的。

感谢大家的帮助！

【讨论】：