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

希望能帮助到你 ：）