I need help with the DOM. These are only five line of JS code and very simple to read.

<style>
*{margin:0;}
</style>
<div style="height:100vh;width:100vw;background-color:#000;">
<button class="btnScrollBottom">Scroll to second div</button>

</div>
 <div style="height:100vh;width:100vw;background-color:violet;"></div> 
<div style="height:100vh;width:100vw;"></div>
<script>
const home = document.querySelector('div')
const div2  = document.querySelectorAll('div')[1]
/* 
I wan to scroll to div with class name div 2 when I clicked the button.
I do not think  scrollTo is a better choice because I think it will causes issue on mobile. Is there any better way to scroll to div with class name div2.
*/
const btnScrollBottom = home.children[0]

btnScrollBottom.addEventListener('click',function(){
window.scrollTo(0,522)
})
</script>