On the mobile side will often use full-screen scroll plug-ins, to achieve common H5 active page effect, fullpage is a very good jquery full-screen scrolling plugin
Fullpage.js plug-in api:http://www.dowebok.com/77.html
Common use methods:
// Configuration Examples $.fn.fullpage ({ anchors:["Page1", "Page2", "Page3"], slidescolor:["#fff", "#000", "#333" ] })
// Method Invocation Example // moveTo (section, slide) sets the screen to scroll to one of the sections or slide, two parameters are index values for a content block or anchor text, and by default the index of slide is set to 0. $.fn.fullpage.moveto (1,0) // animation effect // no animation effect
//callback function$ (' #fullpage '). Fullpage ({anchors: [' FirstPage ', ' secondpage ', ' thirdpage ', ' fourthpage ', ' lastpage '], slidescolor:["#fff", "#000", "#333", "#666", "#999"], //Scroll to a screen after the callback function, receive Anchorlink and index two parameters. //Anchorlink is the name of the anchor chain.//indexes are the index of the section, calculated from 1Afterload:function(Anchorlink, index) {varLoadedsection = $ ( This); //using index if(Index = = 3) {alert ("Section 3 ended loading"); } //using Anchorlink if(Anchorlink = = ' Secondslide ') {alert ("Section 2 ended loading"); } }//callback function before scrolling, receiving 3 parameters of Index, nextindex and direction//index is the serial number of the "page" leaving, starting from 1;//Nextindex is the serial number of the "page" that is scrolled to, starting from 1;//direction determines whether to scroll up or down, and the value is up or down. Onleave:function(Anchorlink, index) {varLeavingsection = $ ( This); //After leaving section 2 if(Index = = 2 && Direction = = ' Down ') {alert ("Going to section 3!"); } Else if(Index = = 2 && Direction = = ' Up ') {alert ("Going to section 1!"); } }});
Find a great help document: Help documentation
Fullpage.js Full-screen scrolling plugin use method