【Foreword】
I often see some full-screen websites, and they look very high-end and elegant
Now a lot of websites use that kind of big picture as the background and the effect looks great, you can use the mouse scroll bar, and then you can scroll down the sections layer by layer, and with transition animation, if there is navigation, you can Click to navigate to the appropriate section. The traditional method is to use the navigation of the a label and the corresponding corresponding section. For beginners, there is generally no high-level method, but using the a label is just to go to the corresponding section at once, and there is no transition at all. It doesn't look very comfortable. Although it can be done with js, it is a bit troublesome, so I found the fullPage.js method.
If you want to do it in practice, you can try to use jquery-based plugins such as fullpage.js or Scrollify, which are lightweight and convenient
【compatible】
jQuery supports jQuery 1.7+, the browser supports IE8+ and other mainstream browsers
【Compared】
Comparing Scrollify and fullPage.js:
Scrollify Like fullPage.js, Scrollify is a full-screen scrolling plugin based on jQuery. Compared with fullPage.js, Scrollify is smaller and less than 4KB compressed. However, it is not as powerful as fullPage.js in terms of functionality, and its support for mobile devices is not as good as fullPage.js. But for the general case, Scrollify is fully capable, it supports custom anchor links, setting excessive effects, offsets, whether to display scroll bars, callback functions, and partial scrolling that fullPage.js does not have
【download】
fullPage.js is an open source JQuery plugin library, its Github address: https://github.com/alvarotrigo/fullPage.js
【Function】
①Support mouse scrolling
②Support forward and backward and keyboard control
③ Multiple callback functions
④Support mobile phone and tablet touch events
⑤Support CSS3 animation
⑥Support window zoom
⑦ Automatic adjustment when the window is zoomed
⑧ You can set scroll width, background color, scroll speed, loop options, callback, text alignment, etc.
【Detailed usage】
(1) File introduction
①Introduce css ( note: the imported css is not to style the element, the style of the element needs to be written by yourself)
The imported css is also a library, not to set css for us. Simply put, it's like using the bootstrap library with the class class.
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css">
②Before the introduction of fullPage.js, since fullPage.js is an open source jQuery, it is necessary to introduce the jQuery library first
<script src="js/jquery.min.js"></script>
③Introduce script files
<script src="js/jquery.fullPage.min.js"></script> <script src="js/jquery.fullPage.js"></script>
(2) Create a page structure
<div id="main_body"> <div class="section">First screen</div> <div class="section">Second screen</div> <div class="section">Third screen</div> <div class="section">Fourth screen</div> <div class="section">Fifth screen</div> </div>analyze:
①每一个section都是一个页面，包裹住所有的页面的容器不能是body，可以任意命名一个id包裹住所有的section；
②section是一个代码一屏，默认代码是从第一屏开始的。如果要定义从第几屏开始的话的话就加active，这样就是从那个屏开始了；
③样式设置：两种方法CSS设置或者JS动态设置
1. 引入的css并非给元素设置样式的，元素的样式须要自己写，例如
<style type="text/css">
body{color: #FFFFFF;}
.section1{background-color: #BFDA00;}
.section2{background-color: #2EBE21;}
.section3{background-color: #2C3E50;}
.section4{background-color: #FF9900;}
</style>
2. JS动态设置（还有许多其他配置项，比如给多个页面填充不同的背景颜色）
激活fullPage效果
$(document).ready(function(){
$('#main_body').fullpage({
sectionsColor: ['red', 'blue', 'yellow', 'green','purple']
}); //激活fullpage的效果，可以检查页面看效果了
})
（3）子滚动屏
如果要在某屏中再加入子滚动屏，需要借助slide类，改动上述第二个section例如以下：
<div class="section section2" style="text-align: center">
<div class="slide">第二屏的第一屏</div>
<div class="slide">第二屏的第二屏</div>
<div class="slide">第二屏的第三屏</div>
<div class="slide">第二屏的第四屏</div>
</div>
（4）背景屏，CSS设置即可
.section1 { background: url(image/1.jpg) no-repeat 100%;}
.section2 { background: url(image/2.jpg) no-repeat 100%;}
（5）循环演示
①返回跳跃性循环
loopTop:true, /* 顶部循环滚动是跳往底部的页面*/ loopBottom:true, /* 底部循环滚动，同样是跳往页面*/ loopHorizontal:false, /* 幻灯片循环滚动*/
②无间隙循环
continuousVertical:true,
区别：第一种在页面滑动到最后一页时，在进行滑动的时候，会跳回第一页，是跳跃的，而第二种在页面滑动到最后一页的时候再次滑动会滑回第一页。注意，两种循环方式不能兼而有之 （实际上两种循环方式都使用的话，会显示第一种）
（6）导航栏
做全屏滚动网页，实现滚动效果后，首先想到的就是网页右边的导航栏，要实现这个导航栏，fullpage.js插件本身就自带配置项，只要会使用就可以实现效果了
先介绍几个api：
①anchors：定义锚链接，默认值为[]，有了锚链接，就可以快速的打开定位到某一页面，也是我们实现导航栏的关键；
②lockAnchors：是否锁定锚链接，默认为false，如果设定为true，定义的锚链接，也就是anchors属性就没有效果了；
③menu：绑定菜单，设定相关属性与anchors的值相对应后，菜单可以控制滚动，默认为false；
④navigation：是否显示导航，默认为false，如果设置为true，会显示小圆点，作为导航；
⑤navigationPostion：导航小圆点的位置，可以设置为left或right；
⑥navigationTooltips：导航小圆点的tooltips的提示，默认为[]，注意按照顺序设置
【使用fullpage.js插件默认自带的导航栏：】
<script>
$(function(){
$('#main_body').fullpage({
anchors : ['section1','section2','section3']，//定义锚链接
navigation：true，//是否显示--true为圆点，false则不显示
continuousVertical: true, //循环演示
navigationPostion：right，//导航位置，left或right
navigationTooltips：['1的提示','2的提示','3的提示'] //设置导航提示
});
});
</script>
【自定义导航栏】
倘若不想用fullpage.js默认的样式效果，还可以自定义样式
HTML：
<div id="gufeibai">
<div class="section">第一屏</div>
<div class="section">第二屏</div>
<div class="section">第三屏</div>
</div>
<ul id="menu">
<li data-menuanchors='page1'><a href="#page1">1屏幕</a></li>
<li data-menuanchors='page2'><a href="#page2">2屏幕</a></li>
<li data-menuanchors='page3'><a href="#page3">3屏幕</a></li>
</ul>
CSS：
#menu { margin: 0; padding: 0; position: fixed; left: 10px; top: 10px;
list-style-type: none; z-index: 70;}
#menu li { float: left; margin: 0 10px 0 0; font-size: 14px;}
#menu a { float: left; padding: 10px 20px; background-color: #fff; color: #333;
text-decoration: none;}
#menu .active a { color: #fff; background-color: #333;}
$(function() {
$("#ido").fullpage({
continuousVertical: true, //循环演示
//绑定菜单
anchors: ['page1', 'page2', 'page3', 'page4','page5','page6'],
menu: '#menu',
});
});
【自定义Section高度】
网上很多用户说无法自定义底部Footer的高度，我也查阅了很多资料，都没有发现方法，但是无意间看到一个Fullpage的示例，实现自定义底部高度的方法，而且是不算在滑动的Section里面，在需要自定义高度的DIV里面，只需要给Section添加.fp-auto-height类就可以实现自定义高度。
【拓展】
（1）随意的改变其中一屏的高度
如果设计别处心裁，最后一屏幕内容装不下，再添加一屏又多余，就是怎么能随意的改变其中一屏的高度，其实很简单，只需要在fullpage方法中添加一个参数：scrollOverflow: true即可。当然不要忘记引入一个
<script src="https://cdn.bootcss.com/fullPage.js/2.9.5/vendors/scrolloverflow.min.js"> </script>
这样就不用担心内容超出一屏的内容无法显示了。可以在任意一屏随意的溢出并能准确衔接下一屏幕的内容了
（2）内容溢出scrollOverflow:true设置失效问题
可能原因：（1）js版本不同导致的（2）scrollOverflow单词拼写错误
（3）自定义的导航菜单active添加不上，激活状态失效
原因：（1）单词拼写错误data-menuanchor写成了data-menuanchors，多了个s
（4）js版本不一样的问题
当jquery.fullpage.css和jquery.fullpage.js和scrolloverflow.min.js这三个版本一致的时候，我试了几个jq版本也没有出现问题，所以，版本要相同指的是jquery.fullpage.css ，scrolloverflow.min.js， jquery.fullpage.js这几个js相同
（5）最后附上部分API
//配置背景颜色
sectionsColor:['red','#f04','#9b0','#d3f'],
//配置幻灯片切换是否显示箭头，默认true
controlArrows:false,
//配置每页内容页面是否垂直居中，默认false
verticalCentered:true,
//配置文字是否随着窗口变化而变化，默认false
resize:true,
//配置页面滚动速度,默认700
scrollingSpeed:1000,
//配置锚链接，不应该和autoScrolling，scrollBar一起使用
anchors:['page1','page2','page3','page4'],
//配置锚点切换时候是否有过度动画，默认true
animateAnchor:false,
//锁定配置的锚链接是否显示，默认false
lokAnchors:true,
//配置动画由css3还是jquery来执行，默认true
css3:true,
//配置滚动到顶部之后是否从底部循环滚动，默认false
loopTop:true,
//相反从底部循环滚动，默认false
loopBottom:true,
//设置页面是否循环滚动与loopTop，loopBottom不兼容,默认是false
continuousVertical:true,
//幻灯片是否循环滚动，默认true
loopHorizontal:false,
//配置是否按照插件的方式来进行滚动，默认true,和锚点不应该一起使用，
一般不设置或者保持默认
autoScrolling:true,
//滚动的时候是否包含滚动条,默认false,和锚点不应该一起使用，一般不设
置或者保持默认
scrollBar:false,
//配置页面上下间距，默认0，如果需要设置固定顶部和顶部菜单导航配合使用
// paddingTop：'300px',
paddingBottom:0,
//配置页面是否有固定的DOM
fixedElements:'#header',
//配置是否支持键盘方向键控制页面切换，默认true
keyboardScrolling:true,
//配置是否激活浏览器前进后退功能，如果页面设置了不按照插件的方式来滚动
该配置也失效，默认true
recordHistory:true,
//配置菜单
menu:'#fullpageMenu',
//配置导航,位置，提示,显示当前位置
navigation:true,
navigation:'right',
navigationTooltips:['page1','page2','page3','page4'],
showActiveTooltip:true,
//配置幻灯片是否显示导航,和位置
slidesNavigation:true,
slidesNavPosition:'bottom',
//配置内容超过容器是否显示滚动条，模式true,
scrollOverflow:true,
//修改section和幻灯片默认CLASS
sctionSelector:
slideSelector:
.