zoukankan      html  css  js  c++  java
  • 滑动到指定标签 标签自动定位效果

    $("#fixbar .main li").mouseover(function(){
          $(this).addClass('active').siblings().removeClass('active');
        });
        $("#fixbar .backtotop").click(function(){
          scrollTo();
        });
        $("#fixbar .main li").click(function(){
          let _index = $(this).index();
          switch(_index){
            case 0:
              scrollTo('#introduction', 300);
              break;
            case 1:
              scrollTo('#culture', 300);
              break;
            case 2:
              scrollTo('#history', 300);
              break;
            case 3:
              scrollTo('#honor', 300);
              break;
            case 4:
              scrollTo('#students', 300);
              break;
          }
        });
        $(window).scroll(function(){
          if($(window).scrollTop() >= $("#students").offset().top-200){
            $("#fixbar .main li").eq(4).addClass('active').siblings().removeClass('active');
          }else if($(window).scrollTop() >= $("#honor").offset().top-200){
            $("#fixbar .main li").eq(3).addClass('active').siblings().removeClass('active');
          }else if($(window).scrollTop() >= $('#history').offset().top-200){
            $("#fixbar .main li").eq(2).addClass('active').siblings().removeClass('active');
          }else if($(window).scrollTop() >= $('#culture').offset().top-200){
            $("#fixbar .main li").eq(1).addClass('active').siblings().removeClass('active');
          }else if($(window).scrollTop() >= $('#introduction').offset().top-200){
            $("#fixbar .main li").eq(0).addClass('active').siblings().removeClass('active');
          }
        });
        function scrollTo(ele, speed){
          if(!speed) speed = 300;
          if(!ele){
            $("html,body").animate({scrollTop: 0}, speed);
          }else{
            if(ele.length > 0) $("html,body").animate({scrollTop: $(ele).offset().top}, speed);
          }
          return false;
        }

    滑动到指定标签
    标签自动定位效果

  • 相关阅读:
    HTTP解析
    Linux(CentOS)常用命令
    Windows下虚拟Linux
    国内静态文件CDN服务介绍 国内js公共库
    吐槽一下csdn和博客园
    项目托管 网站 小记
    微软2013年校园实习生招聘笔试题及答案
    最近在折腾VPS(持续完善)
    spring MVC +freemarker + easyui 实现sql查询和执行小工具总结
    Hessian 接口使用示例总结
  • 原文地址:https://www.cnblogs.com/ichenchao/p/11321220.html
Copyright © 2011-2022 走看看