Home > Article > Web Front-end > Floor navigation source code sharing

Floor navigation source code sharing

巴扎黑Original: 2017-06-26 14:31:461075browse

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>楼层导航-smallswallows</title>
   <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js?1.1.11"></script>
   <style type="text/css">
   *{
       margin:0;
       padding:0;
   }
       .div 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">楼层展示</div>
   <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> 
       <ul>
           <li>第1张</li>
           <li>第2张</li>
           <li>第3张</li>
           <li>第4张</li>
           <li>第5张</li>
           <li>第6张</li>
           <li>第7张</li>
           <li>第8张</li>
       </ul>
       <p>返回顶部</p>
   </div>
</body>
<script>
   window.onload = window.onscroll = function(){
       var top = 50; //控制离顶部的距离
       var length = $(".div div").length;
       var liLength=$("li").length;
//添加加载动画 each
       $(".div div").each(function(){
          $(this).addClass("loading");
       })
console.log($(".div div")[0].offsetTop)
       if($(window).scrollTop() >$(".div div")[0].offsetTop-top ){
           $(".floor").css("display","block")
       }else{
           $(".floor").css("display","none")
}
// 楼层添加颜色，通过:eq()方法来实现
       var num = 0;
       for(var i = 0;i<length;i++){
          if($(window).scrollTop() >=$(".div div")[i].offsetTop- top){
               num = i;
           }
           $(".floor li:eq("+i+")").css("background","")
       }
           $(".floor li:eq("+num+")").css("background","red")
// 楼层点击事件 点击楼层跳转
       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()){
                        $(&#39;body,html&#39;).stop().animate({
                            scrollTop: ($(".div div")[j].offsetTop)
                        }, 500);
                        return false;
                   }
               }
           })
       }
   }
    $(".top").click(function() {
        $(&#39;body,html&#39;).animate({
            scrollTop: 0
        }, 500);
        return false;
    });
</script>
</html>

The above is the detailed content of Floor navigation source code sharing. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Introduction to jQuery UI and feature introductionNext article：Introduction to jQuery UI and feature introduction

See more

Floor navigation source code sharing

Related articles