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

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

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>


    <div id="#home"></div>
  • 4
    点赞
  • 31
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值