将窗口滚动到元素的底部

Question

我正在尝试向应用程序中的一个模块添加一个功能，当元素的高度大于窗口的高度时，它将滚动浏览器窗口到元素的底部。

模块与下面的代码片段有点类似，当列表的高度大于窗口的高度时，向列表中添加一个项目时，您必须向下滚动才能再次看到add按钮，那么我是否可以自动地这样做呢?顺便说一下，我并不是指滚动到文档的底部，而是一个特定的元素。

​

(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>

​

Answer 1

这个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>

​