JS's Floor Jump

Objective: To achieve the same level jumps as the major shopping sites

Requirements: Click on the ol Li, the screen slide to the corresponding UL Li Range

Idea: or use Window.scrollto (); Using the slow animation principle to realize the screen sliding

<! DOCTYPE html>{padding:0; Margin:0;} body,html{Height:100%;} ul{List-Style:none; Height:100%;} UL li{Height:100%;} ol{List-Style:none;    position:fixed;    top:80px; left:50px;}    OL li{width:50px;    height:50px; border:1px Solid #000;    Cursor:pointer; Text-Align:center; Line-height:50px;}</style>//Requirements: Click on the ol Li, the screen slide to the corresponding UL Li range//idea: or use Window.scrollto (); Using the slow animation principle to realize the screen sliding//steps://1. Get Elements//2. Specify the background color of LI in UL and OL, the corresponding Li background color is the same//3. Get the element and bind the event//using the easing animation principle to realize the screen sliding//simulate the distance from the top of the box with the scroll event//get ElementvarUL =document.getelementsbytagname ("ul") [0];varOL = document.getElementsByTagName ("ol") [0];varUlliarr =Ul.children;varOlliarr =Ol.children;vartarget = 0;varLeader =0;varTimer =NULL;//Specify the background color of LI in UL and OL, the same as the corresponding Li background color//sets an array that contains the color, and then assigns the color to the specified element in the arrayvarArrcolor = ["Pink", "blue", "yellow", "orange", "green"];//coloring elements of two arrays with a for loop for(vari = 0; i < arrcolor.length; i++) {    //ColoringUlliarr[i].style.backgroundcolor=Arrcolor[i]; Olliarr[i].style.backgroundcolor=Arrcolor[i]; //Property Binding index valueOlliarr[i].index =i; //loop binding for each Li binding point-and-click eventOlliarr[i].onclick =function(){         //Get target Location         //Get index valuetarget = ulliarr[ This. Index].offsettop; //to use the timer, first clear the timerclearinterval (timer); //using the easing animation principle to realize the screen slidingTimer = SetInterval (function(){             //Get step size             varStep = (Target-leader)/10;//Two-time processing stepStep = step>0?Math.ceil (STEP): Math.floor (step); //Screen SwipeLeader = leader+step; Window.scrollto (0, leader); //Clear Timer             if(Math.Abs (Target-leader) <=Math.Abs (STEP)) {Window.scrollto (0, Target);             Clearinterval (timer); }         },25); }}//simulate the distance from the top of the box with the scroll eventWindow.onscroll =function(){    //each time the screen slide, the screen volume to the head assigned to leader, simulation to get the distance from the top of the display areaLeader =scroll (). Top;}</script></body>
JS's Floor Jump