fullpage（全屏滚动）

fullPage.js和fullPage都能实现全屏滚动。

1、引入文件

<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.js"></script>

2、激活fullpage效果

3、fullpage的配置项和方法

    
   
   
    
   
   
    
     href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.js"></script>

   
   

    <script>
        $(document).ready( function () {
            $('#fullpage').fullpage({
                // 用配置项为样式设置背景色
                sectionsColor:['#f00','#0ff','#0f0','#f50'],
//                是否用箭头来控制幻灯片，没有箭头时，在移动上可以通过左右滑动来操作幻灯片--false为没有箭头。
                controlArrows:true,
//                每一页的内容是否为居中，一般为true，默认为true
                verticalCentered:false,
//                字体是否随着窗口缩放而缩放，默认为false
                resize:false,
//                滚动速度，单位为毫秒，默认700
                scrollingSpeed:500,
//                定义锚链接，默认值为[],有了锚链接，用户就可以快速打开定位到某一页，注意定义锚链接的时候，值不要和页面中任意的id或者name相同，尤其是在ie浏览器下，而且定义是不需要加#
               //检查，在滚动时地址会发生变化,锚链接的定义顺序和section的顺寻相同，一一对应
                anchors:['page1','page2','page3','page4'],
//                是否锁定锚链接，默认为false。如果设置为true，那么定义的锚链接，也就是anchors属性没有效果    //检查，在滚动时地址锁定后不发生变化
                lockAnchors:false,
//                如果没有anchors这个属性，想直接定位到某个页面，我们用active这个css，也可以直接定位
//                
   
   
 
    
    
第三页
   
   
  直接定位到第三页
//                定义页面section滚动的动画方式，默认为easeInOutCubic，如果修改此项，需要引入插件jquery.easings，或者jquery.ui

//                是否使用 CSS3 transforms 滚动,这个平配置项可以提高支持css3的的浏览器，比如移动设备等速度，如果不支持css3，则会是用户jquery来代替css3
//                默认为true
                css3:true,
//                滚动到最顶部是否连续滚动到最底部。默认为false
//                loopTop:true,
//                滚动到最底部是否连续滚动到最顶部。默认为false。
                loopBottom:true,
//               横向 slide是否连续循环滚动，默认为true
                loopHorizontal:true,
//                是否使用插件的滚动方式，默认为true，如果选择 false，则会出现浏览器自带的滚动条，将不会按页滚动，而是按照滚动条的默认行为来滚动
                autoScrolling:true,
//                是否包含滚动条，默认为false，如果选择true，则浏览器自带滚动条出现，页面滚动时还是按页滚动。但是滚动条的默认行为也有效。
                scrollBar:false,
//                设置每个section顶部和底部的padding，默认都为0，如果我们要设置一个固定在顶部或者底部的导航菜单等，可以使用这两个元素。
                paddingTop:0,
                paddingBottom:0,
//                固定的元素，默认为null。需要配置一个jquery选择器，在页面滚动的时候，fixedElements设置的元素固定不动
                fixedElements:'#onediv',
//                是否使用键盘方向键导航,默认为true
                keyboardScrolling:false,
//                在移动设备中滑动的敏感性，默认为5，按百分比来衡量，最高为100，越大难度越大。
                touchSensitivity:5,
//                是否循环滚动，默认为false，如果设置为true，则页面会循环滚动，而不像loopTop，loopBottom那样跳动，注意这个属性和loopTop，loopBottom不兼容，不能同时设置
                continuousVertical:false,
//                锚链接是否可以控制滚动动画，默认为true，如果设置为false，则通过锚链接定位到某个页面时则不会有动画效果
                animateAnchor:true,
//                是否记录历史，默认为true，可以记录页面滚动的历史，通过浏览器的前进和后退来导航，注意如果设置了 autoScrolling:false，那么这个配置也将被关闭，即设置为false
                recordHistory:true,
//                绑定菜单，设置相关属性与anchors，的值对应后，菜单可以控制滚动，默认为false，可以设置为菜单的jquery的选择器
                menu:'#menu',
//                是否显示导航，默认为false，如果设置为true，则会显示小圆点，作为导航
                navigation:true,
//                导航远点的位置，可以是left或者right
                navigationPosition:'left',
//                导航圆点的tooltips的设置，默认为[],注意按照顺序设置，悬浮提示-------与页面一一对应
                navigationTooltips:['page1','page2','page3','page4'],
//                 是否显示当前页面的导航提示（tooltips）信息，默认为false  自动提示
                showActiveTooltips:false,
//                是否显示横向幻灯片的导航，默认为false
                slidesNavigation:true,
//                横向幻灯片导航的位置，默认为bottom，可以设置为top或者bottom
                slidesNavPosition:'top',
//                内容超过满屏后是否显示滚动条，默认为false，如果设置为true，则会显示滚动条，如要滚动查看内容，需要jquery.slimScroll插件配合，slinscroll主要用于模拟传统浏览器滚动条
                scrollOverflow:true,
//                sectionSelector:section选择器，默认为.section
//                slideSelector:slide的选择器，默认为.slide


//                回调函数

//                滚动到某一个section时的回调
                afterLoad:function (anchorLink,index) {
                    console.log("数据是anchorLink:----"+anchorLink+"index:----"+index);
                    
                },
//                离开一个section出发的回调
                onLeave:function (index,nextIndex,dricetion) {
                    console.log("dricetion:----"+dricetion+"index:----"+index+"nextIndex:-----"+nextIndex);

                },
//                界面初始化完成的回调
                afterRender:function () {
                    console.log("afterRender");
                },
//                浏览器窗口尺寸改变完成的回调
                afterResize:function () {
                    console.log("afterResize");
                }
            });

        })
    </script>


    




   
   


    
    
    

     
      这是固定不动的元素
    
    
    
    
    
第一页
第二页
第三页
第四页
    
    
    
 
     
     
      
      第一页
     
     
    
    
    
    
    

        
     
     
         
     
     

      
      silde__01
     
     
        
     
     

      
      silde__02
     
     
        
     
     

      
      silde__031
     
     
        
     
     

      
      silde__04
     
     
        
     
     

      
      silde__04
     
     
    
    
    
    
    
    

        
     
     
第三页
    
     
     
    
     
     
        
     
     
        
     
     
        
     
     
        
     
     
        
     
     
        
     
     
        
     
     
        
     
     
        
     
     
        
     
     
        
     
     
    
    
    
    
    
    
 
     
     
第四页
    
    


   
   

4、方法使用