<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

     <style type="text/css">

         *{padding:0;margin:0;}

         .top{ width:100%; height:100px; text-align: center; line-height: 100px;}

         .nav{ width:100%; height:100px;}

         .nav ul{width:100%; list-style: none;}

         .nav ul li { float:left; line-height:100px;

             text-align: center; width:25%; background:#0095cd;}

         .fixed {position:fixed; top:0px;}

         .cont1,.cont2,.cont3,.cont4{width:100%;height:400px; color:#fff;}

         .cont1 {background:#00678e; text-align:center; line-height: 400px;}

         .cont2 {background:#0F3A56; text-align:center; line-height: 400px;}

         .cont3 {background:#33bbee; text-align:center; line-height: 400px;}

         .cont4 {background:#7ca1f8; text-align:center; line-height: 400px;}

         .footer { background:#68767b; text-align:center;line-height:200px;}

     </style>

     <script src="style/js/jquery-1.8.3.min.js"></script>

         <script>

         $(function(){

             $(window).scroll(function(){

                 if ($(window).scrollTop() >= 100) {

                     $('.nav').addClass('fixed');

                 } else {

                     $('.nav').removeClass('fixed');

                 }

             })

             var _li = $('.nav').find('li');

             _li.each(function(){

                 var index = $(this).index();

                 $(this).find('a').click(function(){

                     var len = index-1;

                     var numTop = getHeight(len);

                     $('html,body').animate({scrollTop: numTop + "px"},300);

                 })

             })

         })

         function getHeight(index) {

             var heightall = 0;

             for(i=0;i<=index;i++){

                 heightall += 400;

             }

             return heightall;

         }

     </script>

 </head>

 <body>

 <div class="top">这是顶部，高度为100px</div>

 <div class="nav">

     <ul>

         <li><a>first</a></li>

         <li><a>scond</a></li>

         <li><a>third</a></li>

         <li><a>four</a></li>

     </ul>

 </div>

 <div class="cont1">this is content1</div>

 <div class="cont2">this is content2</div>

 <div class="cont3">this is content3</div>

 <div class="cont4">this is content4</div>

 <div class="footer">this is footer</div>

 </body>

 </html>

jquery 跳转到当前页面指定位置的更多相关文章

  1. html js点击按钮滚动跳转定位到页面指定位置（DIV）的方法代码

    一:通过html锚点实现滚动定位到页面指定位置(DIV):    如果我们要点击实现跳转的地方是一个html锚点,也就是点击一个A标签超链接实现跳转,可以把A标签的href属性直接指向跳转指定位置的d ...

  2. html锚点 点击跳转到页面指定位置

    本来是在看阮大神写的ajax教程,突然发现点击目录文字会跳转到相对应的文本内容,于是乎激发了我的兴趣. 这个究竟怎么做的,刚开始看的时候一知半解,找度娘就是:"点击跳转到页面指定位置&quo ...

  3. ScrollTo：实现平滑滚动到页面指定位置

    ScrollTo:实现平滑滚动到页面指定位置 ScrollTo是一款基于jQuery的滚动插件,当点击页面的链接时,可以平滑地滚动到页面指定的位置.适用在一些页面内容比较多,页面长度有好几屏的场合,本 ...

  4. coolite 获取新的页面链接到当前页面指定位置Panel的运用

    如下图所示,点击温州市文成县之前,右边是一片空白,点击后生成新的页面 html运用到了coolite的Panel控件 <Center> <ext:Panel ID="Pan ...

  5. jQuery跳转到页面指定位置

    @参考博客 var t = $("#id").offset().top;// 获取需要跳转到标签的top值 //$(window).scrollTop(t);// 跳转到指定位置 ...

  6. 锚点/JQ：点击导航跳到网页中的指定位置

    今天做了一个简单的功能,页面往下滚动到一定位置,顶部出现一个浮动的导航栏,点击导航栏标签,下面页面跳转到相应的区域.回到顶部,导航栏隐藏. 因为顶部有一个浮动的导航栏,所以跳转到下面页面的时候,总是盖 ...

  7. 通过href简单实现单击a链接跳转到页面指定位置

    在页面中点击a标签后,要使其跳到页面里面相应的地方,方法很简单,就是在a标签里面href中的内容和你要跳到这个区域的id同名即可,例如: <a href="#ppp" tar ...

  8. HTML实现跳转到页面指定位置

    <a href="#page1">跳转到页面1</a> <a href="#page2">跳转到页面2</a> ...

  9. JQuery插件：ScrollTo平滑滚动到页面指定位置

    1.准备jQuery库和scrollTo.js插件. <script type="text/javascript" src="js/jquery.js"& ...

随机推荐

  1. React Native微信分享 朋友圈分享 Android/iOS 通用

    超详细React Native实现微信好友/朋友圈分享功能-Android/iOS双平台通用   2016/06/16 |  React Native技术文章 |  Sky丶清|  暂无评论 |  1 ...

  2. 在子线程中使用runloop，正确操作NSTimer计时的注意点 三种可选方法

    一直想写一篇关于runloop学习有所得的文章,总是没有很好的例子.游戏中有一个计时功能在主线程中调用: 1 + (NSTimer *)scheduledTimerWithTimeInterval:( ...

  3. 在discuz二次开发模板时，diy编辑显示我“抱歉，您没有权限添加此模块

    <div id="diy_vk_portal_slide_top" class="area"><div id="frameCRxR0 ...

  4. java 练习题

    题目:想控制台输1-3个整数,按顺序为年,月,日.#号键结束输入.若输入一个整数,则为年份,程序判断是闰年还是平年:若输入两个整数,则为年份和月份,程序将输出该年的月份的天数:若输入3个整数:则为年, ...

  5. ACM题目————最短路径问题

    Description 给你n个点,m条无向边,每条边都有长度d和花费p,给你起点s终点t,要求输出起点到终点的最短距离及其花费,如果最短距离有多条路线,则输出花费最少的. Input 输入n,m,点 ...

  6. cocos2dx win打包apk

    1.配置环境(未完) 2. eclipse 导入项目之后配置 Builder新建两个.一个是ndk目录下的 ndk-build.cmd  ,一个是自己写的build_native.bat 拷贝资源的 ...

  7. Removing Columns 分类： 贪心 CF 2015-08-08 16:10 10人阅读 评论(0) 收藏

    Removing Columns time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...

  8. ListView Animation

    简单介绍一下4种动画效果方式AnimationSet set = new AnimationSet(false); Animation animation = new AlphaAnimation(0 ...

  9. MDI窗体容器和权限设置.avi

    一.MDI窗体容器 MDi窗体是装Form的容器.平常Form(窗体)就是平常展示的最高级别,但是MDI比Form还高级.它可以让其它窗体在它的内部打开,无法超出它的范围 1 创建:将某个窗体的属性: ...

  10. java ClassLoader与动态扩展

    摘自:http://blog.csdn.net/moreevan/article/details/6654781