我有一份问题清单。当我点击第一个问题时,它会自动把我带到页面底部的特定元素。
我如何用jQuery做到这一点?
我有一份问题清单。当我点击第一个问题时,它会自动把我带到页面底部的特定元素。
我如何用jQuery做到这一点?
当前回答
一个内线平滑滚动到底部
window.scrollTo({ left: 0, top: document.body.scrollHeight, behavior: "smooth" });
要向上滚动,只需将top设置为0
其他回答
jQuery不是必需的。我从谷歌搜索中得到的大多数结果都是这样的答案:
window.scrollTo(0, document.body.scrollHeight);
在有嵌套元素的地方,文档可能无法滚动。在这种情况下,您需要以滚动的元素为目标,并使用其滚动高度。
nestedElement.scrollTo(0, nestedElement.scrollHeight);
你可以参考一些其他的来源:
http://www.alecjacobson.com/weblog/?p=753 http://www.mediacollege.com/internet/javascript/page/scroll.html http://www.electrictoolbox.com/jquery-scroll-bottom/
你可以试试Gentle Anchors,一个不错的javascript插件。
例子:
function SomeFunction() {
// your code
// Pass an id attribute to scroll to. The # is required
Gentle_Anchors.Setup('#destination');
// maybe some more code
}
兼容性测试对象:
Mac Firefox, Safari, Opera Windows Firefox, Opera, Safari, Internet Explorer 5.55+ Linux未经测试,但至少Firefox应该没问题
我找到了一个诀窍。
在页面底部放置一个输入类型文本,并在需要时调用jquery focus。
使它为只读和漂亮的css清除边界和背景。
一个使用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>