<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

    *{

    margin:0;

    padding:0;

    }

        ul{

            position: fixed;

            left: 0;

            top: 30%;

        }

        li{

            height: 40px;

            line-height: 40px;

            list-style: none;

            width: 100px;

            text-align: center;

            background: #f01;

            color: #ffffff;

            cursor:pointer;

        }

        a{

            color: #ffffff;

            text-decoration: none;

        }

        #a1{background: #fff;border: 1px solid #ddd;

            height: 900px;

            width: 90%;

            margin-left: 10%;

        }

        #a2{background: #fff;border: 1px solid #ddd;

            height: 900px;

            width: 90%;

            margin-left: 10%;

        }

        #a3{background: #fff;border: 1px solid #ddd;

            height: 900px;

            width: 90%;

            margin-left: 10%;

        }

        #a4{background: #fff;border: 1px solid #ddd;

            height: 900px;

            width: 90%;

            margin-left: 10%;

        }

        #a5{background: #fff;border: 1px solid #ddd;

            height: 900px;

            width: 90%;

            margin-left: 10%;

        }

        .active{

            background: #ddd;

        }

        .active>a{

            color: #000;

        }

        #LouDao{

            display: none;

        }

        #main{

            overflow: hidden;

        }

    </style>

</head>

<body>

<ul id="LouDao">

    <li><a>第一章</a></li>

    <li><a>第二章</a></li>

    <li><a>第三章</a></li>

    <li><a>第四章</a></li>

    <li><a>第五章</a></li>

</ul>

<div style="height:300px;"></div>

<div id="main">

    <div id="a1">1 这是一个悲惨的故事</div>

    <div id="a2">2 这是一个欢快的故事</div>

    <div id="a3">3 这是一个伤心的故事</div>

    <div id="a4">4 这是一个幸福的故事</div>

    <div id="a5">5 这是一个狗血的故事</div>

</div>

<footer>

    <div style="height: 900px;width: 100%">底部</div>

</footer>

</body>

<script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>

<script>

    var daohang=$("#LouDao");//楼层标签

    var li=$("#LouDao>li");//获取目录li

    var main=$("#main>div");//文章主要内容

     $(window).scroll(function() {

        //获取到页面总高度

        var HeightAll = $("html,body").height();

        //获取滚动条位置

        var iTop = $(window).scrollTop();

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

            //楼层的显示和隐藏

            if(iTop>=main[0].offsetTop){

                daohang.show();

            }else{

                daohang.hide();

            };

            //楼层的联动

            var num=0;

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

                if(iTop>=(main[i].offsetTop)-100){

                    num=i;

                }

                li[i].className='';//设置li中的class为空

               //main[i].style.padding='35px 0 0 0';

            };

            li[num].className='active';

            //main[num].style.padding='65px 0 0 0';

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

                li[i].onclick=function(){

                    for(var j=0;j<li.length;j++){

                        if(this==li[j]){

                        console.log(li[j]);

                            var t = main.eq($(this).index()).offset().top;

                            console.log(t);

                            //alert(t);

                            //$(".louti").addClass("ommm");

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

                                //scrollTop:main[j].offsetTop

                                "scrollTop": t-100

                            },500);

                        }

                    }

                }

            }

        }

    });

</script>

</html>

jquery锚点跳转的更多相关文章

  1. jquery 在页面上根据ID定位（jQuery锚点跳转及相关操作） 经典

    1.锚点跳转简介 Edit 锚点其实就是可以让页面定位到某个位置上的点.在高度较高的页面中经常见到.比如百度的百科页面,wiki中的page内容. 我知道实现锚点的跳转有两种形式,一种是a标签+nam ...

  2. jquery 在页面上根据ID定位（jQuery锚点跳转及相关操作）

    JQuery下锚点的平滑跳转 对于锚点的平滑跳转,在一般的商业性质的网站上,权衡来说,要谨慎使用. 例如:让页面平滑滚动到一个id为box的元素处,则JQuery代码只要一句话,关键位置 如下: $( ...

  3. jQuery任意标签锚点跳转插件

    // 任意锚点平滑跳转插件// 2010-07-15 v1.0(function($){ $.fn.zxxAnchor = function(options){ var defaults = { ie ...

  4. jQuery实现锚点跳转（就一行代码）

    /* 锚点跳转 */ function anchor(p,fn) { $("html,body").animate({ scrollTop: $("#" + p ...

  5. 各种HTML锚点跳转方式

    1 js控制锚点跳转 <a name="anchor"></a> location.hash="anchor"; 不只有a其他元素也可以 ...

  6. html锚点的作用和js选项卡锚点跳转的使用

    location是javascript里边管理地址栏的内置对象,比如location.href就管理页面的url,用location.href=url就可以直接将页面重定向url.而location. ...

  7. a 锚点跳转滑动效果

    点击a链接时,跳转到相应id的位置处,有一个滑动效果. <a href="#my">我是跳转到div</a><div id="my" ...

  8. HTML meta锚点跳转 小tips

    小tips meta锚点跳转 http://www.zhangxinxu.com/wordpress/2015/03/meta-http-equiv-refresh-content/

  9. zepto的scrollTo，实现锚点跳转

    实现功能:点击右侧字母A,实现锚点跳转功能: 有同学可能说可以直接用锚点跳转实现,是的,锚点跳转可以实现这个功能,但是有一个问题,点击跳转后,再点击返回,返回的是上次跳转的结果,具体的原理就不用多说了 ...

随机推荐

  1. 自己实现简单版的注解Mybatis

    Mybatis属于ORM(Object Relational Mapping)框架,将java对象和关系型数据库建立映射关系,方便对数据库进行操作,其底层还是对jdbc的封装. 实现的思路是: 1 定 ...

  2. 【计算机网络基础】URI、URN和URL的区别

    先引用一张关系图 灰色部分为URI URI强调的是给资源标记命名,URL强调的是给资源定位. URI是Uniform Resource Identifier,表示是一个资源: URL是Uniform ...

  3. A Simple Question of Chemistry

    #include<stdio.h> int main() { int i, l; ]; ]; l = ; ) { l++; } ; a[i]!= && i<l; i+ ...

  4. Android--TextView第一个单词大写

    自定义TextView: public class FirstBoldTextView extends TextView { private boolean firstWordBold = false ...

  5. 【scratch3.0教程】1.3 了解scratch界面内容

    第3课 了解Scratch界面内容 1.认识Scratch界面 双击桌面快捷方式,启动Scratch程序.我们来认识一下Scratch界面吧! (1)指令区 Scratch程序一共有运动.外观.声音. ...

  6. NetCore踩坑记1、 一块网卡引发的血案

    公司的项目架构演进,我们也趁机尝试迁移到netcore,系列随笔讲记录我们的踩坑和填坑记录. HttpClient不行? 这是我们第一次尝试netcore 简要介绍环境 netcore2.2+aspn ...

  7. [jsp学习笔记]servelt get post

    1.post提交数据是隐式的,get是通过在url里面传递的(可以看一下你浏览器的地址栏),用来传递一些不需要保密的数据. 2.用get时,传输数据的大小有限制 (注意不是参数的个数有限制),为2K: ...

  8. 隐马尔可夫模型（HMM）的分类

    1.遍历型(ergodic model) 即每个状态都可以由任意一个状态演变而来,aij>0,for all i , j. 如图: 2.left-right type of HMM 每个状态只能 ...

  9. error LNK2005: “找到一个或多个多重定义的符号” 已经在 xxxx.obj 中定义 的解决方法

    1 问题还原 这里我有三个源文件:Base.hpp, Base.cpp 和 main.cpp 在Base.hpp里面定义一个基类,注意,基类只包含构造函数和析构函数的声明,函数在Base.cpp里实现 ...

  10. fatal:'origin' does not appear to be a git repository fatal:Could not read from remote repository

    天gitlab中遇到的问题: 当 git push origin branch_name时遇到报错如下: fatal:'origin' does not appear to be a git repo ...