滚动到元素底部的窗口
问题描述:
我正在尝试在正在处理的应用程序中为模块添加功能,当元素高度大于窗口高度时,将浏览器窗口滚动到元素底部。滚动到元素底部的窗口
该模块有点类似于下面的代码片段,当列表的高度大于窗口的高度时向列表中添加项目时,必须再次向下滚动才能看到添加按钮,那么有没有办法我可以自动做到这一点,顺便说一句==(顺便说一句)我不是指滚动到文档的底部,只是一个特定的元素。
(function() {
var lists = document.querySelector('ul'),
addBtn = lists.nextElementSibling.lastElementChild,
textInput = addBtn.previousElementSibling;
addBtn.addEventListener('click', appendItem);
function appendItem() {
var item = document.createElement('li');
if (textInput.value == '') item.innerText = 'test-item';
else item.innerText = textInput.value;
lists.appendChild(item);
}
console.log(lists, addBtn, textInput);
})();
div:not(#fake-form) {
background-color: #F9F2C4;
max-width: 200px;
margin: 0 auto;
}
ul {
list-style: none;
padding: 4px;
margin: 0;
}
ul li {
list-style: none;
padding: 4px;
margin: 0;
font-size: 24px;
}
div#fake-form {
text-align: center;
padding: 4px;
}
input {
display: block;
width: 100%;
box-sizing: border-box;
margin-bottom: 4px;
}
<div>
<ul>
<li>test item</li>
<li>test item</li>
<li>test item</li>
<li>test item</li>
<li>test item</li>
<li>test item</li>
<li>test item</li>
</ul>
<div id="fake-form">
<input type="text">
<button>add item</button>
</div>
<div>
答
这个jQuery代码将滚动把元件的底部在窗口的底部。我基本上只是获取要滚动的元素的顶部位置,然后将元素的高度添加到顶部位置以确定底部位置。从底部位置值中减去窗口高度,然后滚动到结果值将使元素的底部位于窗口的底部。如果您希望元素的底部位于窗口的顶部(真正滚动到元素的底部,但它将超出视口),请改为滚动至divBot
。
$('button').on('click', function() {
var wHeight = $(window).height(),
divTop = $('#one').offset().top,
divHeight = $('#one').outerHeight(),
divBot = divTop + divHeight;
$('html, body').animate({
scrollTop: (divBot - wHeight)
}, 2000);
})
div {
height: 200vh;
border-bottom: 5px solid black;
}
#one {
border-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><button>click</button></div>
<div id="one"></div>
<div></div>
我还不说话的jQuery。但是,谢谢 –