原生js实现类似fullpage的单页/全屏滚动

前端之家收集整理的这篇文章主要介绍了原生js实现类似fullpage的单页/全屏滚动前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言

单页/全屏滚动页面越来越常见了,它多用于产品介绍、招聘等内容较少的简单页面。针对这种效果也出现了不少 jQuery 插件,本文实现的效果类似于fullpage的单屏滚动,使用原生JS实现,不依赖任何js库;

css代码

HTML代码:

js代码:

max) return page = max; move(); },100); e.preventDefault(); } ); //平滑滚动 function move() { var value = height * page; var diff = scrollTop() - value; (function callee() { diff = diff / 1.2 | 0; scrollTop(value + diff); if (diff) itv = setTimeout(callee,16); })(); }; //resize事件 function onresize() { height = body.offsetHeight; move(); }; //获取或设置scrollTop function scrollTop(v) { if (v == null) return Math.max(body.scrollTop,html.scrollTop); else body.scrollTop = html.scrollTop = v; }; });

在线演示请点击

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

原文链接:https://www.f2er.com/js/42208.html

猜你在找的JavaScript相关文章