currentId識別不出來
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>定位導航+回到頂部</title>
<style type="text/css">
*{
margin:0;
padding:0;
border:0;
}
.box{
width:550px;
margin:0 auto;
}
.menu{
float:left;
width:auto;
height:200px;
position:fixed;
margin:0 auto;
}
.menu ul li{
float:left;
margin:0 0 0 10px;
}
.menu ul li a{
display:block;
width:100px;
line-height:30px;
background-color:#eee;
color:#000;
text-align:center;
text-decoration:none;
}
.menu ul li a:hover{
background-color:#F90;
color:#3CF;
}
.menu ul li .now{
background-color:#F90;
color:#3CF;
}
.content{
float:left;
width:100%;
}
.content1{
width:100%;
height:400px;
}
.content2{
width:100%;
height:500px;
}
.content3{
width:100%;
height:600px;
}
.content4{
width:100%;
height:700px;
}
.content5{
width:100%;
height:800px;
}
.To-Top{
display:none;
width:67px;
height:76px;
position:fixed;
right:5%;
bottom:5%;
background:url(images/To-Top.jpg) no-repeat;
}
li{
list-style:none;
}
</style>
<link rel="stylesheet" type="text/css" href="">
<script type="text/javascript" src="JavaScript/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="JavaScript/rotation.js"></script>
</head>
<body>
<div class="box">
<div class="menu">
? ? <ul>
? ? ? ? <li><a class="now" href="#item1">1F</a></li>
? ? ? ? ? ? <li><a href="#item2">2F</a></li>
? ? ? ? ? ? <li><a href="#item3">3F</a></li>
? ? ? ? ? ? <li><a href="#item4">4F</a></li>
? ? ? ? ? ? <li><a href="#item5">5F</a></li>
? ? ? ? </ul>
? ? </div>
? ? <div class="content">
? ? <div id="item1" class="content1">
? ? ? ? 1
? ? ? ? </div>
? ? ? ? <div id="item2" class="content2">
? ? ? ? 2
? ? ? ? </div>
? ? ? ? <div id="item3" class="content3">
? ? ? ? 3
? ? ? ? </div>
? ? ? ? <div id="item4" class="content4">
? ? ? ? 4
? ? ? ? </div>
? ? ? ? <div id="item5" class="content5">
? ? ? ? 5
? ? ? ? </div>
? ? </div>
</div>
? ? <a class="To-Top"></a>
</body>
</html>
window.onload = function(){
//回到頂部
var oReturn = document.querySelector('.To-Top');
var timer = null;
var TouchTop = true;
//獲取頁面可視區高度
var clientHeight = document.documentElement.clientHeight;
window.onscroll = function(){
var oHeight = document.documentElement.scrollTop || document.body.scrollTop;
if(oHeight >= clientHeight){
oReturn.style.display = 'block';
}
else{
oReturn.style.display = 'none';
}
if(!TouchTop){
clearInterval(timer);
}
TouchTop = false;
}
oReturn.onclick = function(){
timer = setInterval(function(){
var oHeight = document.documentElement.scrollTop || document.body.scrollTop;
//函數向下取整
var oSpeed = Math.floor(-oHeight/6);
TouchTop = true;
document.documentElement.scrollTop = document.body.scrollTop = oHeight + oSpeed;
if(oHeight == 0){
clearInterval(timer);
}
},30)
}
//網頁定位導航
$(document).ready(function() {
//滾動條發生滾動的時候
? ? ? ? $(window).scroll(function(){
var ReturnTop = $(document).scrollTop();
var oMenu = $('.menu');
var items = $('.content').find('div');
var currentId = "";//當前所在的樓層（item）#id
items.each(function() {
? ? ? ? ? ? ? ? var m = $(this);
var itemTop = m.offset().top;
if(ReturnTop > itemTop){
currentId = "#" + m.attr("id");
}else{
return false; //跳過
}
console.log(currentId);
? ? ? ? ? ? });
//給相應樓層的a 設置 current， 取消其他鏈接的now
var nowLink = oMenu.find('.now');
//判斷值是否等于自己
if(currentId && nowLink.attr('href') != currentId){
nowLink.removeClass('now');
oMenu.find("[href" + ?currentId + "]").addClass('now');
}
});
? ? });
}
2018-06-11
var items = $('.content').find('div');
你的每個content后面加了數字，換成class="content"就可以了