纯js页面平滑滚动插件
源码介绍
smoothscroll.js是一款纯js页面平滑滚动插件。该js页面平滑滚动插件的特点是页面滚动的行为被作为window对象的扩展,用户可以通过window对象直接调用平滑滚动的方法。 在页面中引入smoothscroll.js文件。 smoothscroll.js插件有多种平滑滚动的方法,分别如下: 1、平滑滚动的方法: 2、 3、 4、 5、 6、平滑滚动到页面顶部。 smoothscroll.js页面平滑滚动插件的github地址为:https://github.com/iamdustan/smoothscroll。简要教程
使用方法
<script type="text/javascript" src="path/to/smoothscroll.js"></script>
初始化插件
window.scroll
或window.scrollTo
。例如平滑滚动到距离页面顶部2500像素的地方,代码如下:
window.scroll({ top: 2500, left: 0, behavior: 'smooth' });
window.scrollBy
。平滑移动指定像素。例如:
window.scrollBy({ top: 100, left: 0, behavior: 'smooth' });
//或者
window.scrollBy({ top: -100, left: 0, behavior: 'smooth' });
element.scrollIntoView
。平滑滚动到指定的元素。例如:
document.querySelector('.hello').scrollIntoView({ behavior: 'smooth' });
element.scroll
或element.scrollTo
。将某个元素中的内容滚动到指定位置,例如:
element.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
element.scrollBy
。在元素内部滚动指定的像素。例如:
element.scrollBy({ top: 100, left: 0, behavior: 'smooth' });
window.scroll({ top: 0, left: 0, behavior: 'smooth' });
//或者
document.querySelector('header').scrollIntoView({ behavior: 'smooth' });
本站资源均来自互联网,仅供研究学习,禁止违法使用和商用,产生法律纠纷本站概不负责!如果侵犯了您的权益请与我们联系!
转载请注明出处: 免费源码网-免费的源码资源网站 » 纯js页面平滑滚动插件
发表评论 取消回复