gpt4 book ai didi

javascript - 页面滚动到 div 的底部

转载 作者:行者123 更新时间:2023-11-28 07:36:38 26 4
gpt4 key购买 nike

如何在单击按钮时将 div 底部与页面底部对齐?类似于使用 window.location.href = '#Div1' 将屏幕对齐到 'Div1'

的顶部
   <html>
<head>
</head>
<body>
<div id="Div1" style="border: 1px solid #cccccc; position: absolute; background: #FA8258"
onclick="window.location.href='#Div2'">
This is Div Orange. Click to see Div Yellow.
</div>
<div id="Div2" style="border: 1px solid #cccccc; position: absolute; top: 800px;
background: #F4FA58" onclick="window.location.href='#Div3'">
This is Div Yellow. Click to see Div Blue. But I want this div to be at the bottom
instead of top on click of Div Orange.
</div>
<div id="Div3" style="border: 1px solid #cccccc; position: absolute; top: 1600px;
background: #A9F5E1;" onclick="window.location.href='#Div1'">
This is Div Blue. Click to see Div Orange.
</div>
</body>
</html>

最佳答案

我认为这会为您完成工作。这是假设您想要在正文中滚动。 $(window).height() 指视口(viewport)高度。

function jumpBottom(from, id) {
var to = document.getElementById(id);
document.body.scrollTop = to.offsetTop - $(window).height() + to.offsetHeight;
}
<div id="Div1" style="border: 1px solid #cccccc; position: absolute; background: #FA8258"
onclick="jumpBottom(this,'Div2')">
This is Div Orange. Click to see Div yellow.
</div>
<div id="Div2" style="border: 1px solid #cccccc; position: absolute; top: 800px;
background: #F4FA58" onclick="window.location.href='#Div3'">
This is Div Yellow. Click to see Div Blue. But I want this div to be at the bottom
instead of top on click of Div Orange.
</div>
<div id="Div3" style="border: 1px solid #cccccc; position: absolute; top: 1600px;
background: #A9F5E1;" onclick="window.location.href='#Div1'">
This is Div Blue. Click to see Div Orange.
</div>

关于javascript - 页面滚动到 div 的底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31178393/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com