最近一直在弄页面的事情，对页面方面的知识又巩固了一下。这次的内容如题，大家对代码有疑问或者是有更好的方法欢迎留言！
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
if( scrollTop + titleHeight >= contentChild[i].offsetTop){
for(var j=0;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:指定相关模块回到指定位置(该位置要去掉菜单导航栏高度)。
};
页面部分：
KL介绍技术属性项目创新盈利模式经济模式联系我们
如果觉得《html导航栏页面切换的js js实现页面滚动切换导航栏/点击导航栏跳转到指定位置...》对你有帮助，请点赞、收藏，并留下你的观点哦！
