smoothscroll.js是一款纯js页面平滑滚动插件。该js页面平滑滚动插件的特点是页面滚动的行为被作为window对象的扩展,用户可以通过window对象直接调用平滑滚动的方法。
使用方法
在页面中引入smoothscroll.js文件。
<script type="text/javascript" src="path/to/smoothscroll.js"></script>
初始化插件
smoothscroll.js插件有多种平滑滚动的方法,分别如下:
1、平滑滚动的方法:window.scroll
或window.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.scroll
或element.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。