html返回顶部动画,CSS3 Animations创建返回顶部的平滑动画

返回顶部在css3未出来前我们都是使用jquery或原生的js来实现返回顶部了，现在有了css3我们可以轻松的实现返回顶部了，具体给各位介绍一下.

一般在一个长的网页中，我们都会有一个按钮，让用户能够快速的定位到网页的不同地方，一般都是一个返回顶部的按钮，这个功能我们都是使用的jQuery来完成，但是今天，我们为大家讲解一下不使用jQuery而是使用CSS3的动画，创建返回顶部的平滑动画效果。

返回顶部的动画效果，能够让我们快速的导航到菜单栏，通常，我们使用jQuery代码是这么编写代码的

$( 'body, html' ).animate({ scrollTop : 0 }, 800 );

所以，如果我们设置scrollTop为500，那么网页将滚动到离顶部还有500px的位置上面。

CSS3给我们带来了很多高级的功能，比如说动画效果，我就在想一种不依赖JavaScript的解决方法，最后我发现这是不可能实现的，因为我们仅仅通过CSS代码是无法访问CSS3 Animations API。

我有点不甘心，就这样的放弃，我决定试试通过JavaScript获取到CSS3动画的API，于是我找到了一个方法。

想法很简单，首先我们需要使用jQuery API获取到当前滚动的距离定义为：POS，然后在我们的

元素中设置margin-top负的：-POS属性，所以现在我们有了一个初步的方法，我们可以看到，当滚动距离的增加，和滚动滑条的随机位置如下图表示：