<!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. [转帖]armel、armhf和arm64

    armel.armhf和arm64 转帖 1 这些名词是什么的缩写 1.1 armel 是arm eabi little endian的缩写.eabi是软浮点二进制接口,这里的e是embeded,是对 ...

  2. Qt 5.12 LTS 部署

    1. 拷贝release生成的exe到一个独立的目录deploy 2. windeployqt.exe A_Toolkit.exe 3. 将qt\qt5.12.5\tool\mingw730_64\b ...

  3. python with方法

    在实际的编码过程中,有时有一些任务,需要事先做一些设置,事后做一些清理,这时就需要python with出场了,with能够对这样的需求进行一个比较优雅的处理,最常用的例子就是对访问文件的处理. 一般 ...

  4. 一行代码让3D翻转后的文本恢复清晰

    FlashPlayer10提供的3D功能有一个相当蛋疼的问题:只要设置过rotationX.rotationY或者rotationZ属性,显示对象里面的文字(尤其是设备字体,位图文本)就会一直处于模糊 ...

  5. 直线DDA，直线和圆的Bresenham算法

    // DDA.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include<Windows.h> #include<g ...

  6. 转 C# 使用openssl

    //先用大整数来生成一个1024bit的密钥对 RSA rsa = new RSA(); BigNumber number = OpenSSL.Core.Random.Next(10, 10, 1); ...

  7. 浅谈ES6中super关键字

    作用: super 关键字用于访问父对象上的函数. 语法: super([arguments]); // 访问父对象上的构造函数 super.functionOnParent([arguments]) ...

  8. C++中头文件与源文件的作用详解

    一.C++ 编译模式 通常,在一个 C++ 程序中,只包含两类文件―― .cpp 文件和 .h 文件.其中,.cpp 文件被称作 C++ 源文件,里面放的都是 C++ 的源代码:而 .h 文件则被称作 ...

  9. cscope安装

    安装 # apt-get install cscope .vimrc中添加 if has("cscope") set csprg=/usr/bin/cscope set csto= ...

  10. [AIR] NativeExtension在IOS下的开发实例 --- 新建项目测试ANE(四)

    来源:http://bbs.9ria.com/thread-102043-1-1.html 通过前面的努力,好了,我们终于得到了一个ANE文件了.下面我们开始新建一个Flex Mobile项目做一下测 ...