如何使用javascript和css製作開關和滾動效果？

Question

我想打一個滾動效應，我的網頁：

我的網頁的內容：

<div id="first"> 
    Content 1 
    <a href="#second">Switch</a> 
</div> 
<div id="second"> 
    Content 2 
</div> 

顯然，當我點擊Switch，瀏覽器屏幕將切換從div#first立即div#second。

但是，我想創建一個效果，使div#first順利切換並滑動到div#second（不是立即）。此外，我也想創建一個滾動效果。當用戶在div#first並向下滾動時，瀏覽器屏幕將自動滑動到div#second，反之亦然。

我該怎麼用javascript（或者jQuery，如果有必要）做到這一點？

Answer 1

是的，你可以做到這一點使用方法animate

$("a").click(function(){ 
    $('html, body').animate({ 
     scrollTop: $("#second").offset().top 
    }, 900); 
}) 

這裏是Jsfiddle

希望它能幫助:)