<!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. linux下用core和gdb查询出现"段错误"的地方【转】

    转自:http://blog.chinaunix.net/uid-30091091-id-5754288.html 原文地址:linux下用core和gdb查询出现"段错误"的地方 ...

  2. Best Time to Buy and Sell Stock

    class Solution { public: int maxProfit(vector<int>& prices) { //eg: 5 6 2 3 1 4: // 记录i之前最 ...

  3. n阶乘 尾数0的个数

    class Solution {public: int trailingZeroes(int n) {            if(n<=0) return 0; int i=0;        ...

  4. 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.1.CSS框架和其他功能

    jquery.ui.all.css 1.所有主题必须的文件都包含在这个文件中.它由ui.base.css和ui.them.css两个文件中拉入的@import执行构成. jquery.ui.base. ...

  5. jQuery extend() & jQuery.fn.extend()，插件编写

    资料来源:网上资料整理并自行改编测试.复制以下代码并依赖jquery.js,jquery.validate.js即可执行.有误之处,请@我啊,敬请赐教. <!DOCTYPE html PUBLI ...

  6. PHP文件系统处理相关操作

    <?php/* PHP文件系统处理 * 所有文件处理都是使用系统函数完成的. * 是基于Linux/Unix系统为模型 * * 文件系统处理的作用: * 1. 所有的项目离不开文件处理 * 2. ...

  7. 8、web入门回顾/ Http

    1 web入门回顾 web入门 1)web服务软件作用: 把本地资源共享给外部访问 2)tomcat服务器基本操作      : 启动:  %tomcat%/bin/startup.bat 关闭: % ...

  8. ACM题目————A simple problem

    Description Zty很痴迷数学问题..一天,yifenfei出了个数学题想难倒他,让他回答1 / n.但Zty却回答不了^_^. 请大家编程帮助他.   Input 第一行整数T,表示测试组 ...

  9. YTU 2295: KMP模式匹配 一（串）

    2295: KMP模式匹配 一(串) 时间限制: 1 Sec  内存限制: 128 MB 提交: 32  解决: 22 题目描述 求子串的next值,用next数组存放,全部输出 输入 输入一个字符串 ...

  10. html的textarea控制字数小案例

    <h3>设计理念说明(200字以内)</h3> <textarea onkeyup="checkLen(this)"></textarea ...