个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我正在使用 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/
24
4
0
我在 iPad 的 Objective-c 项目中有一个带有 UIWebView 的 ViewController。 当我添加 html(使用 loadHtmlString)时，我尝试保持它在 loa
好吧，我看不到了。我正在使用the scrollTo plugin并在我的网站中有一个scrollTo 函数。它有效，但现在突然不起作用...... 这是我的代码: $(document).ready
我真的需要帮助解决这个问题，我对 JS 的了解不是很好。所以，基本上我想在单击链接时滚动到该部分，但不是通过 (href="#target")，我想使用属性来完成此操作。另外，如果可能的话，我也想添加
无法对 Jquery ScrollTo 应用缓动方法: $("#scroller").scrollTo(target,1000,{axis:'x',easing:'linear'}); 这并不能缓解任
我尝试实现scrollTo函数，但问题是当我滚动时我希望滚动到的元素位于屏幕顶部而不是中间或其他地方。 JsFiddle 这是js函数 $(document).ready(function () {
这个想法是点击一个链接进入另一个页面(index.html)，一旦你到达那里，立即进入一个 anchor div。我尝试通过触发事件来做到这一点，但没有成功。 scrollTo 在index.html
我正在开发一个网格，至少可以说，它的界面非常动态。 我想做的是关注 $this 元素，无论它在哪里，无论它是在点击时移动到页面顶部还是返回到网格中的原始位置。 发生的情况是，当单击一个元素时.....
我有一系列关于我刚刚完成开发的应用程序的部分。我正在使用 jQuery 的scrollTo 插件。过去它对我来说一直很有效。 应用程序应该执行以下操作: 加载所有部分，第一个部分立即展开，其他所有部分
这看起来很简单，但我似乎无法弄清楚。我想更改使用 JQuery 的 ScrollTo 插件滚动到的元素的背景颜色。我正在使用 onAfter 设置。这就是我所拥有的: $("#nav-inpage")
我不太清楚scrollTo()插件函数。 我想做的是水平移动到特定目标(就像一个场景到另一个场景)。这是我的一些代码: > NatureVille 它根本不起作用。有人可以尽快简化或解释这个
我正在尝试找出一种使用 scrollTo() 的方法单击链接后在新页面上运行。不幸的是，使用 window.onload在我的情况下不起作用，因为我只想在从特定链接打开页面时滚动。 我正在尝试让主页链
我有一个问题，我想在页面渲染后通过调用 window.scrollTo() 将页面滚动到特定元素。但不起作用。有什么限制吗？ var step = Math.round(distance / 25);
我想使用 scrollTo，但是当单击导航栏上的链接时，它会滚动到右侧的 div，但只是稍微远一点。我认为它与顶部的固定导航栏有关。我该如何抵消它？ $(document).ready(func
我有一个 ul 列表，我正在尝试使用最新版本的 JQuery ScrollTo (v. 1.4.11) 使其向下滚动到其中 li 的高度(以创建垂直 slider )。 它正在上下滚动，几乎按预期工作
关闭。这个问题需要多问focused 。目前不接受答案。 想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 2 年前。 Improve this ques
我使用 scrollto 和 scrollspy 建立了一个单页网站。一旦导航栏固定在顶部，该页面就可以很好地工作。但是，如果您在导航栏固定到顶部之前单击任何链接，所有链接都会关闭。而且他们离开的高度
如何在多个 div 上使用 jquery-scrollTo。假设我有以下 div Home (current) Grid System Tooltips Tables
我为 WordPress 网站创建的导航栏出现问题。有些链接旨在向下滚动到主页上的不同位置，有些链接是指向网站其他位置的外部链接。像这样的事情: Link 1
我是一名销售人员开发人员，我想通过上下滑动来上下滚动，这很容易，我用它完成了它，它在所有浏览器和所有设备浏览器(如(iPhone/Pad/Andy))上都能完美运行，但在浏览器中，我们有当我在 sal
我设置了这个简单的联系表单，由于此时我没有开发时间，所以我使用 jQuery 验证而不是 AJAX 来设置它。这很好用。 但现在我想在表单出现错误时让页面向下滚动。我已经下载了 jquery.scro
我是一名优秀的程序员,十分优秀！