スクロールウィンドウを次にdiv、jQuery

Question

私の例のような効果を得ることができるコードを書くためにjQueryと苦労しています。私はscrollIntoViewがChromeでのみ正しく動作するため、これを実行しています。 https://jsfiddle.net/Lw6b88wg/1/

btn.onclick = function() { 
    let listElements = document.querySelectorAll('p'); 
    let lastElementNumber = listElements.length; 
    listElements[lastElementNumber - 1].scrollIntoView({ 
     behavior: 'smooth', 
     block: 'end', 
     inline: 'end' 
    }); 
} 

Answer 1

$('#btn').on('click', function() { 
 
    var divHeight = $('#outer-div')[0].scrollHeight; 
 
    $('html, body').animate({ 
 
    scrollTop: '0px' 
 
    }, 300); 
 
    $('#outer-div').animate({ 
 
    scrollTop: divHeight 
 
    }, 300); 
 
});

body { 
 
    height: 1500px; 
 
    position: relative; 
 
    margin: 0; 
 
    padding-bottom: 6rem; 
 
} 
 

 
div { 
 
    border: 1px solid red; 
 
    overflow-y: scroll; 
 
    width: 100px; 
 
    height: 200px; 
 
} 
 

 
button { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
}

<div id="outer-div"> 
 
    <p> 
 
    1 
 
    </p> 
 
    <p> 
 
    2 
 
    </p> 
 
    <p> 
 
    3 
 
    </p> 
 
    <p> 
 
    4 
 
    </p> 
 
    <p> 
 
    5 
 
    </p> 
 
    <p> 
 
    6 
 
    </p> 
 
    <p> 
 
    7 
 
    </p> 
 
    <p> 
 
    8 
 
    </p> 
 
    <p> 
 
    9 
 
    </p> 
 
    <p> 
 
    10 
 
    </p> 
 
    <p> 
 
    11 
 
    </p> 
 
    <p> 
 
    12 
 
    </p> 
 
    <p> 
 
    13 
 
    </p> 
 
</div> 
 
<button id="btn"> 
 
click me 
 
</button > 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>