我有一份问题清单。当我点击第一个问题时,它会自动把我带到页面底部的特定元素。
我如何用jQuery做到这一点?
我有一份问题清单。当我点击第一个问题时,它会自动把我带到页面底部的特定元素。
我如何用jQuery做到这一点?
当前回答
一个使用jquery的简单例子
$('html, body').animate({
scrollTop: $(this).height(),
});
其他回答
如果您想向下滚动到特定元素,这是一种简单的方法。
当您想向下滚动时,请调用此函数。
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>
下面是跨浏览器的解决方案。它已经在Chrome、Firefox、Safari和IE11上进行了测试
window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight);
window.scrollTo (0, document.body.scrollHeight);不能在Firefox上运行,至少不能在Firefox 37.0.2上运行
window.scrollTo (0,1 e10);
总是工作。
1e10是个很大的数字。所以它总是在页面的末尾。
这里有一个对我有用的方法:
预期结果:
无滚动动画 在第一次加载页面底部加载 加载在页面底部的所有刷新
代码:
<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
你也可以用动画来做这个,非常简单
$('html, body').animate({
scrollTop: $('footer').offset().top
//scrollTop: $('#your-id').offset().top
//scrollTop: $('.your-class').offset().top
}, 'slow');
希望有所帮助, 谢谢你!