平滑滚动div id到div id无法正常工作？

Question

Hi im building a website, now i am trying to make when u click on a div u smooth scroll to the other div but it is not working here is the code i am using:

<script>
$("#knop").click(function() {
    $('html, body').animate({
        scrollTop: $("#nieuws").offset().top
    }, 2000);
});
</script>

The two divs:

<div class="nieuwsbrief" id="knop" style="text-align:center; cursor: pointer;">BLIJF OP DE HOOGTE<br> MET ONZE NIEUWSBRIEF</div>

<div id="nieuws"></div>

Thank you!

Answer 1

Here is an approach to vertically scrolling backwards and forwards between two divs, using plain vanilla javascript:

 var div1 = document.getElementById('div1'); var div2 = document.getElementById('div2'); var verticalGapInPixels = 624; var scrollIncrementInPixels = 2; var numberOfIntervals = (verticalGapInPixels / scrollIncrementInPixels); function scrollBetweenDivs() { var i = 0; var scrollIncrement = (this.id === 'div1' ? scrollIncrementInPixels : -scrollIncrementInPixels); var scrollByInterval = setInterval( function(){ window.scrollBy(0,scrollIncrement); i++; if (i >= numberOfIntervals) {clearInterval(scrollByInterval);} },1 ); } div1.addEventListener('click',scrollBetweenDivs,false); div2.addEventListener('click',scrollBetweenDivs,false); 

 div { width: 120px; height: 120px; margin: 12px auto 500px; text-align: center; border: 2px solid rgb(63,63,63); cursor: pointer; } div p { font-size: 12px; } #div1 { background: rgb(191,191,191); } #div2 { background: rgb(127,127,127); } 

 <div id="div1"> <h2>Div 1</h2> <p>Click to Scroll<br />Down to Div 2</p> </div> <div id="div2"> <h2>Div 2</h2> <p>Click to Scroll<br />Up to Div 1</p> </div>