滾動到元素底部的窗口

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>