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

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

  • 相关阅读:
    学习进度笔记06
    学习进度笔记05
    学习进度笔记04
    学习进度笔记03
    学习进度笔记02
    周总结13
    周总结12
    周总结11
    人月神话阅读笔记3
    第一阶段冲刺10
  • 原文地址:https://www.cnblogs.com/ichenchao/p/11321220.html
Copyright © 2011-2022 走看看