currentId识别不出来
慕莱坞2336554
2018-05-22 20:36
<!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');
}
});
});
}
1回答
-
- 橘梦清荷
- 2018-06-11 16:00:18
var items = $('.content').find('div');
你的每个content后面加了数字，换成class="content"就可以了
网页定位导航特效
71404 学习 · 486 问题
相似问题