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

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

  • 相关阅读:
    java中过滤器和拦截器的区别
    Java中内部类和静态内部类的区别
    SpringBoot启动的时候切换配置文件命令
    centos7安装Subversion
    关于curl_setopt参数的记录
    Linux Samba文件共享服务,安装与案例配置
    CentOS7源码安装Redis5.0.4非关系型数据库
    Centos7部署LAMP平台之架构之路
    Centos7安装及配置DHCP服务
    CentOS 7源码安装MYSQL-5.6
  • 原文地址:https://www.cnblogs.com/ichenchao/p/11321220.html
Copyright © 2011-2022 走看看