将窗口滚动到元素底部答案

【问题标题】：Scrolling window to the bottom of an element将窗口滚动到元素底部
【发布时间】：2023-04-06 10:05:01
【问题描述】：

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

该模块有点类似于下面的 sn-p，当您将项目添加到列表时，当列表的高度大于窗口的高度时，您必须向下滚动才能再次看到添加按钮，所以是否有我可以自动执行此操作的方式，顺便说一下 == (BTW) 我并不是说滚动到文档的底部，只是滚动到一个特定的元素。

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

【问题讨论】：

标签： javascript html css scroll

【解决方案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>

【讨论】：