滚动到元素底部的窗口

Question

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

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

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