我有一份问题清单。当我点击第一个问题时,它会自动把我带到页面底部的特定元素。
我如何用jQuery做到这一点?
我有一份问题清单。当我点击第一个问题时,它会自动把我带到页面底部的特定元素。
我如何用jQuery做到这一点?
当前回答
如果在您想要滚动到的位置或附近的任何类型的标记中有一个ID,那么只需使用scrollIntoView函数编写一行JavaScript即可。例如,假设您所讨论的元素是ID为“mydiv1”的DIV
<div id="mydiv1">[your contents]</div>
然后运行JavaScript命令
document.getElementById("mydiv1").scrollIntoView();
根本不需要JQuery。 希望这能有所帮助。
其他回答
这里有一个对我有用的方法:
预期结果:
无滚动动画 在第一次加载页面底部加载 加载在页面底部的所有刷新
代码:
<script>
function scrollToBottom() {
window.scrollTo(0, document.body.scrollHeight);
}
history.scrollRestoration = "manual";
window.onload = scrollToBottom;
</script>
为什么这种方法比其他方法更有效:
像Chrome这样的浏览器有一个内置的预设,可以在刷新后记住你在页面上的位置。只是一个窗口。onload不起作用,因为你的浏览器会自动滚动你在刷新之前的位置,在你调用一行后,如:
window.scrollTo(0, document.body.scrollHeight);
这就是为什么我们需要补充:
history.scrollRestoration = "manual";
在窗户前。Onload首先禁用该内置功能。
引用:
窗口的文档。onload: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
窗口的文档。scrollTo: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo
历史文档。scrollRestoration: https://developer.mozilla.org/en-US/docs/Web/API/History/scrollRestoration
那么多的答案试图计算文件的高度。但对我来说,这并不是正确的计算。然而,这两种方法都有效:
jquery
$('html,body').animate({scrollTop: 9999});
或者只是js
window.scrollTo(0,9999);
我放弃了滚动,而是尝试了锚定方法:
<a href="#target_id_at_bottom">scroll to the bottom</a>
伴随着这个CSS魅力:
html,
body {
scroll-behavior: smooth;
}
祝你有愉快的一天!
如果您想向下滚动到特定元素,这是一种简单的方法。
当您想向下滚动时,请调用此函数。
function scrollDown() { document.getElementById('scroll').scrollTop = document.getElementById('scroll').scrollHeight } ul{ height: 100px; width: 200px; overflow-y: scroll; border: 1px solid #000; } <ul id='scroll'> <li>Top Here</li> <li>Something Here</li> <li>Something Here</li> <li>Something Here</li> <li>Something Here</li> <li>Something Here</li> <li>Something Here</li> <li>Something Here</li> <li>Something Here</li> <li>Something Here</li> <li>Bottom Here</li> <li style="color: red">Bottom Here</li> </ul> <br /> <button onclick='scrollDown()'>Scroll Down</button>
我也遇到过同样的问题。对于我来说,在一个时间点上,div的元素没有完全加载,scrollTop属性是用scrollHeight的当前值初始化的,这不是scrollHeight的正确结束值。
我的项目在Angular 8中,我所做的是:
我使用viewchild来获取.ts文件中的元素。 我已经继承了AfterViewChecked事件,并在那里放置了一行代码,其中声明viewchild元素必须将scrollTop值的值scrollHeight (this.viewChildElement.nativeElement。scrollTop = this.viewChildElement.nativeElement.scrollHeight;)
AfterViewChecked事件触发了几次,它最终从scrollHeight中获得了正确的值。