如何使用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);
})

这是小提琴手

希望它有帮助:)