zoukankan      html  css  js  c++  java
  • 导航栏对应相应的模块,可点击索引和滚动索引到需要到达的位置

    参考图

    实现原理offset().top

    html部分

    直接上js

    1,定义变量

    var section=$(".section");//对应的区块
    var arr=[];//创建一个空数组
    var movetop="0"; //做一个true和false操作
    var $navBar=$(".navBar"); 
    var navLi=$navBar.find("li"); //操作的元素

    for(var i=0;i<section.length;i++){

      arr[i]=section.eq(i).offset().top;//这个是距离上端的偏移量(与文档的上端距离)

    }  

    function scrollMove(elem,m){

      elem.each(function(i){

        $(this).on("click",function(){

          if(movetop=="0"){

            movetop=1;

            $(this).addClass("active").siblings().removeClass('active');

            $("body,html").animate({

              scrollTop:section.eq(i).offset().top-82;

            },300,function(){

              movetop="0";

            })

          }

        })

      })

    }

    scrollMove(navLi,100);

    日常所遇,随手而记。
  • 相关阅读:
    bzoj4517 [Sdoi2016]排列计数
    bzoj1415 [Noi2005]聪聪和可可
    两个系列的书
    陈天权:数学分析教学中学到的和想到的
    广义范德蒙德行列式计算
    蒙特卡罗方法入门
    LaTeX 文字带边框
    LaTeX算法排版
    常用工具
    常用算法
  • 原文地址:https://www.cnblogs.com/zhihou/p/6606607.html
Copyright © 2011-2022 走看看