我有一份问题清单。当我点击第一个问题时,它会自动把我带到页面底部的特定元素。

我如何用jQuery做到这一点?


当前回答

滚动整个页面到底部:

const scrollingElement = (document.scrollingElement || document.body);
scrollingElement.scrollTop = scrollingElement.scrollHeight;

你可以在这里查看演示

将一个特定的元素滚动到底部:

const scrollToBottom = (id) => {
    const element = document.getElementById(id);
    element.scrollTop = element.scrollHeight;
}

下面是演示

它是这样工作的:

参考:scrollTop, scrollHeight, clientHeight

更新:最新版本的Chrome(61+)和Firefox不支持滚动正文,请参阅:https://dev.opera.com/articles/fixing-the-scrolltop-bug/

其他回答

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/

你也可以用动画来做这个,非常简单

$('html, body').animate({
   scrollTop: $('footer').offset().top
   //scrollTop: $('#your-id').offset().top
   //scrollTop: $('.your-class').offset().top
}, 'slow');

希望有所帮助, 谢谢你!

你可以给link元素的引用属性href附加任何id:

<a href="#myLink" id="myLink">
    Click me
</a>

在上面的例子中,当用户单击页面底部的“点击我”时,导航导航到“点击我”本身。

滚动整个页面到底部:

const scrollingElement = (document.scrollingElement || document.body);
scrollingElement.scrollTop = scrollingElement.scrollHeight;

你可以在这里查看演示

将一个特定的元素滚动到底部:

const scrollToBottom = (id) => {
    const element = document.getElementById(id);
    element.scrollTop = element.scrollHeight;
}

下面是演示

它是这样工作的:

参考:scrollTop, scrollHeight, clientHeight

更新:最新版本的Chrome(61+)和Firefox不支持滚动正文,请参阅:https://dev.opera.com/articles/fixing-the-scrolltop-bug/

如果在您想要滚动到的位置或附近的任何类型的标记中有一个ID,那么只需使用scrollIntoView函数编写一行JavaScript即可。例如,假设您所讨论的元素是ID为“mydiv1”的DIV

<div id="mydiv1">[your contents]</div>

然后运行JavaScript命令

document.getElementById("mydiv1").scrollIntoView();

根本不需要JQuery。 希望这能有所帮助。