我正在使用 Bootstrap 的按钮插件 toggle state自定义复选框上的功能。当这个按钮被切换(打开)时，一个隐藏的元素应该出现在页面顶部附近，然后页面应该滚动到顶部。当按钮接下来被切换(关闭)时，元素应该消失并且页面应该滚动到顶部。
当按钮打开和关闭但滚动不工作时，隐藏元素被切换。
将 data-toggle 从“buttons”更改为“button”可以使滚动起作用，但不会明显地切换按钮，所以这不好。
我尝试为复选框本身设置一个 onchange 事件，但它也不会滚动。
似乎 Bootstrap 的 onclick 事件函数正在做一些不允许我的 onclick 函数正常运行的事情。到目前为止我没能理解它(我会继续尝试)。
为 window.scrollTo() 函数设置超时使其工作。为什么会这样？有没有办法在没有超时的情况下执行此操作？
<body>
<div class="container">
<div>
<h3>Toggle Header and Scroll To Top</h3><hr />
<h1 id="displayMe" class="d-none">Display Me</h1>
<div style="height: 100vh;"></div>
<div class="btn-group-toggle btn btn-success custom-control custom-switch" data-toggle="buttons" id="myButton">
<input type="checkbox" class="custom-control-input" id="myCheckbox">
<label class="custom-control-label" for="myCheckbox">Toggle and Scroll</label>
</div>
</div>
</div>
<script src="assets/jquery/jquery.min.js"></script>
<script src="assets/twitter-bootstrap/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$("#myButton").on("click", toggleAndScroll);
});
function toggleAndScroll() {
$('#displayMe').toggleClass('d-none');
//setTimeout(function () {
window.scrollTo(0, 0);
//}, 100);
}
</script>
</body>
https://jsfiddle.net/ews9q50v/
(取消注释 setTimeout 行以查看它是否正常工作)
最佳答案
我不知道为什么它不起作用。 Bootstrap 搞砸了。
但是您可以使用 setTimeout(func, 0) 将 scrollTo 移动到事件循环的末尾，从而轻松绕过它。
$("#myButton").on("click", toggleAndScroll);
function toggleAndScroll() {
$('#displayMe').toggleClass('d-none');
setTimeout(function () {
window.scrollTo(0, 0);
}, 0);
}
关于javascript - 为什么 window.scrollTo() 没有被调用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56549709/