Floor navigation, floor navigation js
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "UTF-8">
<Title> floor navigation-smallswallows </title>
<Script type = "text/javascript" src = "http://code.jquery.com/jquery-1.11.0.min.js"> </script>
<Style type = "text/css">
*{
Margin: 0;
Padding: 0;
}
. Div {
Width: 300px;
Height: 800px;
Border: 1px solid red;
}
Ul li {
List-style-type: none;
}
. Floor {
Position: fixed;
Top: 20px;
Right: 20px;
Border: 1px solid red;
Display: none;
}
. Loading {
Background: skyblue;
}
. Red {
Background: red;
}
Li,. top {
Cursor: pointer;
}
Li: hover {
Background: skyblue;
}
</Style>
</Head>
<Body>
<Div style = "height: 50px; background: red"> floor display </div>
<Div class = "div">
<Div> 1 </div>
<Div> 2 </div>
<Div> 3 </div>
<Div> 4 </div>
<Div> 5 </div>
<Div> 6 </div>
<Div> 7 </div>
<Div> 8 </div>
</Div>
<Div class = "floor">
<Ul class = "floor_ul">
<Li> 1st sheets </li>
<Li> 2nd sheets </li>
<Li> 3rd sheets </li>
<Li> 4th sheets </li>
<Li> 5th sheets </li>
<Li> 6th sheets </li>
<Li> 7th sheets </li>
<Li> 8th sheets </li>
</Ul>
<P class = "top"> Back to top </p>
</Div>
</Body>
<Script>
Window. onload = window. onscroll = function (){
Var top = 50; // control the distance from the top
Var length = $ (". div"). length;
Var liLength = $ ("li"). length;
// Add the loading animation each
$ (". Div"). each (function (){
$ (This). addClass ("loading ");
})
Console. log ($ (". div") [0]. offsetTop)
If ($ (window). scrollTop ()> $ (". div") [0]. offsetTop-top ){
$ (". Floor" ).css ("display", "block ")
} Else {
$ (". Floor" ).css ("display", "none ")
}
// Add the floor color by using the eq () method.
Var num = 0;
For (var I = 0; I <length; I ++ ){
If ($ (window). scrollTop () >=$ (". div") [I]. offsetTop-top ){
Num = I;
}
$ (". Floor li: eq (" + I + ")" ).css ("background ","")
}
$ (". Floor li: eq (" + num + ")" ).css ("background", "red ")
// Click the floor button event to jump to the floor
For (var I = 0; I <liLength; I ++ ){
$ (". Floor li: eq (" + I + ")"). click (function (){
For (var j = 0; j <liLength; j ++ ){
If(((this).html () === (". floor li: eq (" + j + ")" ).html ()){
$ ('Body, html '). stop (). animate ({
ScrollTop: ($ (". div") [j]. offsetTop)
},500 );
Return false;
}
}
})
}
}
$ (". Top"). click (function (){
$ ('Body, html '). animate ({
ScrollTop: 0
},500 );
Return false;
});
</Script>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
