纯js页面平滑滚动插件

当前位置:主页 > jQuery库 > 布局和界面 > 纯js页面平滑滚动插件
小编推荐: 掘金是国内最活跃的技术社区,从 jQuery到vue,从前端教程到开源库,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。
纯js页面平滑滚动插件
分享:

    插件介绍

    smoothscroll.js是一款纯js页面平滑滚动插件。该js页面平滑滚动插件的特点是页面滚动的行为被作为window对象的扩展,用户可以通过window对象直接调用平滑滚动的方法。

    浏览器兼容性

    浏览器兼容性
    时间:2017-04-18
    阅读:
简要教程

smoothscroll.js是一款纯js页面平滑滚动插件。该js页面平滑滚动插件的特点是页面滚动的行为被作为window对象的扩展,用户可以通过window对象直接调用平滑滚动的方法。

使用方法

在页面中引入smoothscroll.js文件。

<script type="text/javascript" src="path/to/smoothscroll.js"></script>            
                
初始化插件

smoothscroll.js插件有多种平滑滚动的方法,分别如下:

1、平滑滚动的方法:window.scrollwindow.scrollTo。例如平滑滚动到距离页面顶部2500像素的地方,代码如下:

window.scroll({ top: 2500, left: 0, behavior: 'smooth' });     
                

2、window.scrollBy。平滑移动指定像素。例如:

window.scrollBy({ top: 100, left: 0, behavior: 'smooth' });
//或者
window.scrollBy({ top: -100, left: 0, behavior: 'smooth' });
                

3、element.scrollIntoView。平滑滚动到指定的元素。例如:

document.querySelector('.hello').scrollIntoView({ behavior: 'smooth' });  
                

4、element.scrollelement.scrollTo。将某个元素中的内容滚动到指定位置,例如:

element.scrollTo({ top: 0, left: 0, behavior: 'smooth' });   
                

5、element.scrollBy。在元素内部滚动指定的像素。例如:

element.scrollBy({ top: 100, left: 0, behavior: 'smooth' });
                

6、平滑滚动到页面顶部。

window.scroll({ top: 0, left: 0, behavior: 'smooth' });
//或者
document.querySelector('header').scrollIntoView({ behavior: 'smooth' });
                

smoothscroll.js页面平滑滚动插件的github地址为:https://github.com/iamdustan/smoothscroll

网友评论