返回顶部在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属性,所以现在我们有了一个初步的方法,我们可以看到,当滚动距离的增加,和滚动滑条的随机位置如下图表示: