点击导航目录页面滑动到指定div区域
- $(document).on("click", ".navbar-nav li[link]", function() {
- nav.find('li').removeClass('active');
- $(this).addClass('active');
- //获取模块到顶部的距离
- var id = $(this).attr("link")
- //获取顶部导航条高度
- var topH = $("#top-nav").height()
- var divH = $("#" + id).offset().top - topH
- $('html,body').animate({
- scrollTop : divH
- }, 500);
- })
- <ul class="nav navbar-nav">
- <li link="div1" class="active"><a href="#">产品展示</a></li>
- <li link="div2"><a href="#">解决方案</a></li>
- <li link="div3"><a href="#">新闻</a></li>
- <li link="div4"><a href="#">帮助中心</a></li>
- </ul>
- <div id="div1" class="container" style="background: black;"">产品展示</div>
- <div id="div2" class="container" style="height: 500px; background-color: blue;">新闻</div>
- <div id="div3" class="container" style="height: 500px; background-color: green;">帮助中心</div>
- <div id="div4" class="container" style="height: 500px; background-color: gray;">意见反馈</div>
参考 http://www.17sucai.com/pins/demo-show?id=9118
点击导航目录页面滑动到指定div区域的更多相关文章
- 使用JavaScript打印网页指定DIV区域
JavaScript打印函数myPrint(obj): JavaScript打印页面指定div区域原理:使用window.open()在浏览器打开一个新的页面(window), 使用 window.d ...
- 实现点击到底部、顶部、指定div功能
顶部: $(".back_top").click(function () { scrollTo(0, 0); }); function goTop() { $('html, bod ...
- js实现页面下拉后展示导航,以及点击导航自动滑动到相关页面
//监控,下拉750px后展示导航 $(window).scroll(function(){ var $this = $(this); var targetTop = $(this).scrollTo ...
- 锚点/JQ:点击导航跳到网页中的指定位置
今天做了一个简单的功能,页面往下滚动到一定位置,顶部出现一个浮动的导航栏,点击导航栏标签,下面页面跳转到相应的区域.回到顶部,导航栏隐藏. 因为顶部有一个浮动的导航栏,所以跳转到下面页面的时候,总是盖 ...
- scroll 滚动到指定位置触发事件 and 点击一按钮/链接让页面定位在指定的位置
scroll 滚动到指定位置触发事件:$(function(){ $(window).scroll(function() { var s =$(window).scrollTop(); if (s&g ...
- js监听网页页面滑动滚动事件,实现导航栏自动显示或隐藏
/** * 页面滑动滚动事件 * @param e *///0为隐藏,1为显示var s = 1;function scrollFunc(e) { // e存在就用e不存在就用windon.event ...
- python 全栈开发,Day92(编程式的导航,vue页面布局,marked包的使用)
昨日内容回顾 1. 组件间的传值 1. bus --> 空Vue对象 通过向bus对象抛出自定义事件的方式在组件间传递信息 2. 注意事项: 1. bus.$on()应该在组件mounted(挂 ...
- 点击页面其它地方隐藏div所想到的jQuery的delegate
在网页开发的过程中经常遇到的一个需求就是点击一div内部做某些操作,而点击页面其它地方隐藏该div.比如很多导航菜单,当菜单展开的时候,就会要求点击页面其它非菜单地方,隐藏该菜单. 先从最简单的开始, ...
- Appium python自动化测试系列之页面滑动原理讲解(十)
10.1.1 页面滑动原理分析 在页面滑动查找章节我们就讲了滑动的知识点,只是不知道大家是否有认真练习以及去理解,如果你认真练习.理解了那么我相信这一章节的东西不用看也能够完成,下面我们还是简单分析一 ...
随机推荐
- Spring事件监听ApplicationListener源码流程分析
spring的事件机制是基于观察者设计模式的,ApplicationListener#onApplicationEvent(Event)方法,用于对事件的处理 .在容器初始化的时候执行注册到容器中的L ...
- MySQL所谓的脏页和“抖”一下是什么联系?
在我们平时经常用到的sql更新语句,之前是认为只要sql执行,当前sql的操作会立马执行到服务器磁盘上并返回,但是后来我才知道,事实并非如此,在了解事实之前,首先可能需要先了解什么是redo log, ...
- 轻松搭建ES6开发环境
首先,你要自行查阅什么是ES6和ES5.javascript有什么关系,为什么要编译ES6.废话不多说,just go! 第一步:创建项目并让它成为npm可以管理的仓库. 新建一个项目,名字假设为te ...
- ci 框架中defined('BASEPATH') OR exit('No direct script access allowed');
作用: OR 就是前面的是true时,就不走后面了. 加这个是为了防止不是从index.php访问到的控制器
- 用socket.io实现websocket的一个简单例子
socket.io 是基于 webSocket 构建的跨浏览器的实时应用. 逛博客发现几个比较好的 一.用socket.io实现websocket的一个简单例子 http://biyeah.iteye ...
- 1.2 Go语言基础之变量和常量
变量和常量是编程中必不可少的部分,也是很好理解的一部分. 一.标识符与关键字 1.1 标识符 在编程语言中标识符就是程序员定义的具有特殊意义的词,比如变量名.常量名.函数名等等. Go语言中标识符由字 ...
- 实体类(VO,DO,DTO)的划分
实体类(VO,DO,DTO)的划分 (2011-12-21 15:50:27) 转载▼ 标签: it 经常会接触到VO,DO,DTO的概念,本文从领域建模中的实体划分和项目中的实际应用情况两个角度 ...
- go module 使用举例
go语言中,从1.11开始,引入module,进行版本管理. 通过使用module,工程目录的位置不用必须放在GOPATH下. 本文介绍 module的使用. 下文中用的Go版本是1.13. 1. g ...
- sed与awk
sed 格式 sed 选项 控制命令 文件或标准输入 sed 流程: (循环打印) sed是将文件里的每一行读入模式空间进行操作, sed选项 -r 支持正则表达 -n 取消默认打印 清空当前模式空间 ...
- sqlserver2008 job设定
数据同期: update owk ),td.) ,owk.RecordEndTime),td.) from openrowset( 'SQLOLEDB ', '172.17.1.14'; 'read' ...