<!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()){ $('body,html').stop().animate({ scrollTop: ($(".div div")[j].offsetTop) }, 500); return false; } } }) } } $(".top").click(function() { $('body,html').animate({ scrollTop: 0 }, 500); return false; }); </script> </html>
Atas ialah kandungan terperinci 楼层导航源码分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!