js平滑的页面滚动效果插件smoothScroll-Es5.js

当前位置:主页 > jQuery库 > 工具类 > js平滑的页面滚动效果插件smoothScroll-Es5.js
js平滑的页面滚动效果插件smoothScroll-Es5.js
分享:

    插件介绍

    smoothScroll-Es5.js是一款js平滑的页面滚动效果插件。通过它可以制作页面锚链接之间的平滑滚动效果,和平滑的返回页面顶部效果等。

    浏览器兼容性

    浏览器兼容性
    时间:2017-10-13
    阅读:
麦子学院
简要教程

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属性来指定平滑滚动的类型:linearsmooth

<a href="#idtoScrollTo" duration="5000" 
            easing="smooth" 
            scrollTo="idtoScrollTo" 
            class="scrollOnClick">Test</a>            
                

该纯js页面平滑滚动插件的github地址为:https://github.com/HjalmarSnoep/smoothScroll

下一篇:没有了

网友评论