分享原生javaScript实现的楼层导航功能

最新推荐文章于 2026-03-10 02:40:15 发布

原创最新推荐文章于 2026-03-10 02:40:15 发布 · 5.1k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html #javascript #导航

javaScript 专栏收录该内容

9 篇文章

订阅专栏

本文分享了如何利用原生JavaScript实现楼层导航功能，详细介绍了实现过程和效果展示，为网页交互增加便利。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
*{margin:0; padding:0;}
ul,ol{list-style:none;}
img {border:none;}
a {text-decoration:none;}
#container {position:relative;}
#item-1,#item-2,#item-3,#item-4,#item-5 {color:#fff; height:300px;}
#item-1 {background:#156D8E;}
#item-2 {background:red;}
#item-3 {background:green;}
#item-4 {background:blue;}
#item-5 {background:#F06;}
ul {position:fixed; right:10px; top:10px;}
ul li {color:#000; background:#fff; height:20px; margin-top:10px; cursor:pointer; border:1px solid #000;}
ul li.active {background:red; color:#fff; border:1px solid #fff;}
ul li a {line-height:20px;}
</style>
<script>

function hasClass(obj, sCls){
	
	return obj.className.match(new RegExp("\\b"+sCls+"\\b", "i"));	
		
	//match是string对象的一个方法，返回字符串对象
}

function addClass(obj, sCls){
	
	var blank=(obj.className!="")?" ":"";
	if(!hasClass(obj, sCls))obj.className+=blank+sCls;
}

function removeClass(obj, sCls){
	
	var re=new RegExp("(\\s|^)"+sCls+"(\\s|$)", "i");		// \s表示空白字符
	if(hasClass(obj, sCls))obj.className=obj.className.replace(re, "");
	
}

function getAbsPos (obj){		//此方法不计算margin和border值，如果设置会报错
  
	var x = obj.offsetLeft;  
	var y = obj.offsetTop;  
	while(obj = obj.offsetParent){
		x += obj.offsetLeft;
		y += obj.offsetTop;
	}  
	return {"x": x, "y": y};  
}

function getByClass(obj, sCls){

	var aEle=document.getElementsByTagName("*");
	var aResult=[];
	var reg=new RegExp("\\b"+sCls+"\\b", "i");
	for(var i=0;i<aEle.length;i++){
	
		if(reg.test(aEle[i].className))aResult.push(aEle[i]);
	}
	return aResult;
}

function slideTo(obj, iTarget){
	
	clearInterval(obj.timer);
	obj.timer=setInterval(function(){
		var currentPos=document.documentElement.scrollTop || document.body.scrollTop, iSpeed=0;
		
		iSpeed=(iTarget-currentPos)/8;
		iSpeed=iSpeed>0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
		
		if(iTarget!=currentPos){
			
			window.scrollTo(0,currentPos+iSpeed);
			
		}
		else{
			clearInterval(obj.timer);
		}
	},1);
}

function slideActive(obj, objCls, aTarget, num){
	
	if(obj){
		
		removeClass(obj, objCls);
	}
			
	addClass(aTarget[num].parentNode, objCls);
	
}

window.onload=function(){

	var aNav=document.getElementsByTagName("ul")[0].getElementsByTagName("a");
	
	var aItem=document.getElementById("container").getElementsByTagName("div");

	for(var i=0;i<aNav.length;i++){
	
		aNav[i].onclick=function(){
			
			var targetId=this.attributes["data"].nodeValue;
			
			var target=document.getElementById(targetId);
			
			var targetScroll=getAbsPos(target).y;
			
			slideTo(this, targetScroll);
			
			if(hasClass(this, "active")) return false;
			
		}
	}
	
	window.onscroll=function(){
	
		var currentTop=document.documentElement.scrollTop || document.body.scrollTop;
		
		var oActive=getByClass(document.body, "active")[0];
		
		if(aItem.length==0 || currentTop<=getAbsPos(aItem[0]).y)
		
		slideActive(oActive, "active", aNav, 0);
			
		if(currentTop>=getAbsPos(aItem[aItem.length-1]).y)
		
		slideActive(oActive, "active", aNav, aNav.length-1);	

		for(var k=0;k<aItem.length-1;k++){
		
			if(currentTop>=getAbsPos(aItem[k]).y && currentTop<getAbsPos(aItem[k+1]).y)
			
			slideActive(oActive, "active", aNav, k);

		}
	};
	
};


</script>
</head>

<body>
<div style="height:20px; width:100%; margin:0 auto; text-align:center;">--------    我  在  顶  端    --------</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="container">

	<div id="item-1">我是楼层1</div>
	<div id="item-2">我是楼层2</div>
	<div id="item-3">我是楼层3</div>
	<div id="item-4">我是楼层4</div>
	<div id="item-5">我是楼层5</div>
    
    <ul style="visibility:-hidden;">
        <li><a data="item-1">跳到楼层1</a></li>
        <li><a data="item-2">跳到楼层2</a></li>
        <li><a data="item-3">跳到楼层3</a></li>
        <li><a data="item-4">跳到楼层4</a></li>
        <li><a data="item-5">跳到楼层5</a></li>
	</ul>
</div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<div style="height:20px; width:100%; margin:0 auto; text-align:center;">--------    我  在  底  部    --------</div>
</body>
</html>

运行效果如下：