smoothScroll-Es5.js是一款js平滑的页面滚动效果插件。通过它可以制作页面锚链接之间的平滑滚动效果,和平滑的返回页面顶部效果等。
使用方法
在页面中引smoothScroll-ES5.js文件。
< script type = "text/javascript" src = "path/to/js/smoothScroll-ES5.js" ></ script >
|
HTML结构
然后为你的页面文章添加需要的锚点。例如:
< section id = "idtoScrollTo" ></ section >
|
你可以使用超链接,或其它元素来触发平滑滚动效果。只需要为元素添加scrollOnClick
的class类,并添加一个自定义属性scrollTo
,指向要滚动到的内容的ID。
< a href = "#idtoScrollTo" scrollTo = "idtoScrollTo" class = "scrollOnClick" >go scroll</ a >
|
你还可以通过duration
属性定义平滑滚动的持续时间,以及通过easing
属性来指定平滑滚动的类型:linear
或smooth
。
<a href= "#idtoScrollTo" duration= "5000"
easing= "smooth"
scrollTo= "idtoScrollTo"
class= "scrollOnClick" >Test</a>
|