1. $(document).on("click", ".navbar-nav li[link]", function() {
  2. nav.find('li').removeClass('active');
  3. $(this).addClass('active');
  4. //获取模块到顶部的距离
  5. var id = $(this).attr("link")
  6. //获取顶部导航条高度
  7. var topH = $("#top-nav").height()
  8. var divH = $("#" + id).offset().top - topH
  9. $('html,body').animate({
  10. scrollTop : divH
  11. }, 500);
  12.  
  13. })
  1. <ul class="nav navbar-nav">
  2. <li link="div1" class="active"><a href="#">产品展示</a></li>
  3. <li link="div2"><a href="#">解决方案</a></li>
  4. <li link="div3"><a href="#">新闻</a></li>
  5. <li link="div4"><a href="#">帮助中心</a></li>
  6. </ul>
  7. <div id="div1" class="container" style="background: black;"">产品展示</div>
  8. <div id="div2" class="container" style="height: 500px; background-color: blue;">新闻</div>
  9. <div id="div3" class="container" style="height: 500px; background-color: green;">帮助中心</div>
  10. <div id="div4" class="container" style="height: 500px; background-color: gray;">意见反馈</div>

参考 http://www.17sucai.com/pins/demo-show?id=9118

点击导航目录页面滑动到指定div区域的更多相关文章

  1. 使用JavaScript打印网页指定DIV区域

    JavaScript打印函数myPrint(obj): JavaScript打印页面指定div区域原理:使用window.open()在浏览器打开一个新的页面(window), 使用 window.d ...

  2. 实现点击到底部、顶部、指定div功能

    顶部: $(".back_top").click(function () { scrollTo(0, 0); }); function goTop() { $('html, bod ...

  3. js实现页面下拉后展示导航,以及点击导航自动滑动到相关页面

    //监控,下拉750px后展示导航 $(window).scroll(function(){ var $this = $(this); var targetTop = $(this).scrollTo ...

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

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

  5. scroll 滚动到指定位置触发事件 and 点击一按钮/链接让页面定位在指定的位置

    scroll 滚动到指定位置触发事件:$(function(){ $(window).scroll(function() { var s =$(window).scrollTop(); if (s&g ...

  6. js监听网页页面滑动滚动事件,实现导航栏自动显示或隐藏

    /** * 页面滑动滚动事件 * @param e *///0为隐藏,1为显示var s = 1;function scrollFunc(e) { // e存在就用e不存在就用windon.event ...

  7. python 全栈开发,Day92(编程式的导航,vue页面布局,marked包的使用)

    昨日内容回顾 1. 组件间的传值 1. bus --> 空Vue对象 通过向bus对象抛出自定义事件的方式在组件间传递信息 2. 注意事项: 1. bus.$on()应该在组件mounted(挂 ...

  8. 点击页面其它地方隐藏div所想到的jQuery的delegate

    在网页开发的过程中经常遇到的一个需求就是点击一div内部做某些操作,而点击页面其它地方隐藏该div.比如很多导航菜单,当菜单展开的时候,就会要求点击页面其它非菜单地方,隐藏该菜单. 先从最简单的开始, ...

  9. Appium python自动化测试系列之页面滑动原理讲解(十)

    10.1.1 页面滑动原理分析 在页面滑动查找章节我们就讲了滑动的知识点,只是不知道大家是否有认真练习以及去理解,如果你认真练习.理解了那么我相信这一章节的东西不用看也能够完成,下面我们还是简单分析一 ...

随机推荐

  1. Spring事件监听ApplicationListener源码流程分析

    spring的事件机制是基于观察者设计模式的,ApplicationListener#onApplicationEvent(Event)方法,用于对事件的处理 .在容器初始化的时候执行注册到容器中的L ...

  2. MySQL所谓的脏页和“抖”一下是什么联系?

    在我们平时经常用到的sql更新语句,之前是认为只要sql执行,当前sql的操作会立马执行到服务器磁盘上并返回,但是后来我才知道,事实并非如此,在了解事实之前,首先可能需要先了解什么是redo log, ...

  3. 轻松搭建ES6开发环境

    首先,你要自行查阅什么是ES6和ES5.javascript有什么关系,为什么要编译ES6.废话不多说,just go! 第一步:创建项目并让它成为npm可以管理的仓库. 新建一个项目,名字假设为te ...

  4. ci 框架中defined('BASEPATH') OR exit('No direct script access allowed');

    作用: OR 就是前面的是true时,就不走后面了. 加这个是为了防止不是从index.php访问到的控制器

  5. 用socket.io实现websocket的一个简单例子

    socket.io 是基于 webSocket 构建的跨浏览器的实时应用. 逛博客发现几个比较好的 一.用socket.io实现websocket的一个简单例子 http://biyeah.iteye ...

  6. 1.2 Go语言基础之变量和常量

    变量和常量是编程中必不可少的部分,也是很好理解的一部分. 一.标识符与关键字 1.1 标识符 在编程语言中标识符就是程序员定义的具有特殊意义的词,比如变量名.常量名.函数名等等. Go语言中标识符由字 ...

  7. 实体类(VO,DO,DTO)的划分

    实体类(VO,DO,DTO)的划分 (2011-12-21 15:50:27) 转载▼ 标签: it   经常会接触到VO,DO,DTO的概念,本文从领域建模中的实体划分和项目中的实际应用情况两个角度 ...

  8. go module 使用举例

    go语言中,从1.11开始,引入module,进行版本管理. 通过使用module,工程目录的位置不用必须放在GOPATH下. 本文介绍 module的使用. 下文中用的Go版本是1.13. 1. g ...

  9. sed与awk

    sed 格式 sed 选项 控制命令 文件或标准输入 sed 流程: (循环打印) sed是将文件里的每一行读入模式空间进行操作, sed选项 -r 支持正则表达 -n 取消默认打印 清空当前模式空间 ...

  10. sqlserver2008 job设定

    数据同期: update owk ),td.) ,owk.RecordEndTime),td.) from openrowset( 'SQLOLEDB ', '172.17.1.14'; 'read' ...