最近一直在弄页面的事情，对页面方面的知识又巩固了一下。这次的内容如题，大家对代码有疑问或者是有更好的方法欢迎留言！
js部分
//标题对象
var title = document.getElementById(“title”);
//菜单对象
var menu = document.getElementById(“menu”);
//正文对象
var content = document.getElementById(“content”);
//当前标题据顶部高度
var titleTop = title.offsetTop;
//当前标题高度
var titleHeight = title.offsetHeight;
//对象子节点
var contentChild = content.children;
//菜单子节点
var menuChild = menu.children;
//导航栏随页面滚动而水平切换
window.onscroll = function(){
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
for(var i=0;i<menuChild.length;i++){
if( scrollTop + titleHeight >= contentChild[i].offsetTop){
for(var j=0;j<menuChild.length;j++){
menuChild[j].className = “”;
}
menuChild[i].className = “cur”;
}
}
};
//点击菜单跳转到指定位置
function menuChange(menuType){
//定义id
var menuTypeId;
switch(menuType){
case 0:
menuTypeId = “#home”;
break;
case 1:
menuTypeId =”#tech”;
break;
case 2:
menuTypeId =”#innovate”;
break;
case 3:
menuTypeId =”#gain”;
break;
case 4:
menuTypeId =”#economics”;
break;
case 5:
menuTypeId =”#link”;
break;
default:
menuTypeId =”#home”;
break;
}
$(“html, body”).animate({
scrollTop: $(menuTypeId).offset().top- titleHeight}, {duration: 500,easing: “swing”
});//scrollTop:指定相关模块回到指定位置（该位置要去掉菜单导航栏高度）。
};
页面部分：
<ul class=”menu” id=”menu”>
<li class=”cur”><div οnclick=”menuChange(0)”>KL介绍</div></li>
<li><div οnclick=”menuChange(1)”>技术属性</div></li>
<li><div οnclick=”menuChange(2)”>项目创新</div></li>
<li><div οnclick=”menuChange(3)”>盈利模式</div></li>
<li><div οnclick=”menuChange(4)”>经济模式</div></li>
<li><div οnclick=”menuChange(5)”>联系我们</div></li>
</ul>
<div>
<div id=”#home”></div>
<div id=”#tech”></div>
<div id=”#innovate”></div>
<div id=”#gain”></div>
<div id=”#economics”></div>
<div id=”#link”></div>
</div>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/158212.html
