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;
        }

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

  • 相关阅读:
    MYSQL数据库查看被锁状态以及解锁
    MongoDB命令
    代码重构
    笔试常见之C类型转换
    WeakReference(弱引用)(转)
    Linux ubuntu16.04下vim的安装与配置
    mysql Access denied for user root@localhost之错误解决方法(错误码:1045)
    mysql服务无法启动报错1067解决办法 (mysql启动错误1067)
    js的ajax封装
    windows下apache tomcat整合
  • 原文地址:https://www.cnblogs.com/ichenchao/p/11321220.html
Copyright © 2011-2022 走看看