Question

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

该模块有点类似于下面的代码段，当您在列表的高度大于窗口高度时将项目添加到列表中时，您必须向下滚动才能看到添加按钮再一次，有没有一种方法可以自动完成，顺便说一下==（BTW）我不是指滚动到文档的底部，只是一个特定的元素。

＆＃13;

(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);
})();

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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>

滚动窗口到元素底部

1 个答案: