js实现页面滚动切换导航栏/点击导航栏跳转到指定位置

刺骨的言语ヽ痛彻心扉 2023-10-17 18:55 15阅读 0赞

最近一直在弄页面的事情，对页面方面的知识又巩固了一下。这次的内容如题，大家对代码有疑问或者是有更好的方法欢迎留言！

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;

//导航栏随页面滚动而水平切换

\};

//点击菜单跳转到指定位置  
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>

<div>

</div>