js实现页面下拉后展示导航,以及点击导航自动滑动到相关页面
//监控,下拉750px后展示导航
$(window).scroll(function(){
var $this = $(this);
var targetTop = $(this).scrollTop();
if(targetTop > 750){
$("#fixed-menu").css('display','block');
}else{
$("#fixed-menu").css('display','none');
}
}); //点击导航自动活动到页面
$(".link1").click(function(){
$('body,html').animate({'scrollTop':$(".fwjs").offset().top},800)
}); $(".link2").click(function(){
$('body,html').animate({'scrollTop':$("#zzlc").offset().top},800)
}); $(".link3").click(function(){
$('body,html').animate({'scrollTop':$(".clzb").offset().top},800)
}); $(".link4").click(function(){
$('body,html').animate({'scrollTop':$("#xzfxq").offset().top},800)
}); $(".link5").click(function(){
$('body,html').animate({'scrollTop':$("#gwtd").offset().top},800)
}); $(".link6").click(function(){
$('body,html').animate({'scrollTop':$("#cjwt").offset().top},800)
});
js实现页面下拉后展示导航,以及点击导航自动滑动到相关页面的更多相关文章
- JS列表的下拉菜单组件(仿美化控件select)
JS列表的下拉菜单组件(仿美化控件select) 2014-01-23 23:51 by 龙恩0707, 1101 阅读, 6 评论, 收藏, 编辑 今天是农历23 也是小年,在这祝福大家新年快乐!今 ...
- 代码: 两列图片瀑布流(一次后台取数据,图片懒加载。下拉后分批显示图片。图片高度未知,当图片onload后才显示容器)
代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到 ...
- 页面滚动动态加载数据,页面下拉自动加载内容 jquery
<!DOCTYPE=html> <html> <head> < script src="js/jquery.js" type=" ...
- Jquery页面滚动动态加载数据,页面下拉自动加载内容
<!DOCTYPE=html> <html> <head> <script src="js/jquery.js" type="t ...
- 微信小程序 禁止ios页面下拉下滑滚动 出现空白的情况
项目需要做了一个图片拖动指定组件上删除,和排序的功能android测试正常, ios会出现拖动图片页面也跟着下滑的尴尬情况. 查文档下拉刷新配置默认是关闭的,后经查找文档发现在本页面page.json ...
- bootstrap-multiselect.js多选下拉框初始化时默认选中初始值
bootstrap-multiselect.js多选下拉框默认值设置 一.案例数据格式 二.HTML代码 <select id="msgRoles" multiple=&q ...
- jq自定义下拉菜单,当用户点击非自身元素(下拉菜单)本身时关闭下拉菜单
jq自定义下拉菜单,当用户点击非自身元素(下拉菜单)本身时关闭下拉菜单 截图: 代码如下: //关闭用户菜单 $(document).mousedown(function(e){ var _con = ...
- H5页面基于iScroll.js插件实现下拉刷新,上拉加载更多
前言 在我之前的项目中,页面总是干巴巴的,用户的体验不是特别完美,我也是一直觉得把设计师给到的psd做出来就好,很少考虑用户的感受.我喜欢看不同的App,操作每个步骤,观赏每个能和我互动的交互设计效果 ...
- H5页面下拉加载更多(实用版)
近期在做一个H5网站,需要下拉加载更多产品列表的功能.百度搜索了好久,什么说法都有,什么插件都有. 醉了.基本上每一个能直接拿来用的. 最后发现: 1.dropload.js 插件 还可以,但是 ...
随机推荐
- 安装oracle11gR2
一.通过百度云等途径下载oracle11gR2 二.安装步骤 1,解压缩文件,将两个压缩文件一起解压. 2,在setup.exe右键--属性--兼容性,勾“以管理员身份运行此程序”. 3,双击“set ...
- Error in nextTick: "TypeError: Cannot set property 'xxx' of undefined"解决办法
vue项目在控制台中报这个错误时,当看到nextTick词时想到vue的$nextTick()方法 Vue 在更新 DOM 时是异步执行的.只要侦听到数据变化,Vue 将开启一个队列,并缓冲在同一事件 ...
- P5048 [[Ynoi2019模拟赛]Yuno loves sqrt technology III]
为什么我感觉这题难度虚高啊-- 区间众数的出现次数- 计算器算一下 \(\sqrt 500000 = 708\) 然后我们发现这题的突破口? 考虑分块出来[L,R]块的众数出现个数 用 \(\text ...
- asp.net web core 开发问题汇总(1)
1 ASP.NET Core 设置默认静态起始页 转载地址:ASP.NET Core 设置默认起始页(如default.html) 注:1 默认情况下ASP.NET Core应用程序时不支持静态 ...
- 2020年,最新NGINX的ngx_http_geoip2模块以精准禁止特定国家或者地区IP访问
1.0 geoip2核心识别库 安装geoip2 lib步骤: cd /usr/local/src .tar.gz wget https://github.com/maxmind/libmaxmind ...
- win10驱动签名禁用与启动
禁用:https://jingyan.baidu.com/article/624e74594dbc8d34e8ba5aa6.html?qq-pf-to=pcqq.c2c 启用或恢复:https://z ...
- [POI2006] SZK-Schools - 费用流
差不多就是个二分图带权匹配?(我还是敲费用流吧) 每个点向着自己能到的学校连边,费用按题意设定 跑最小费用最大流即可 #include <bits/stdc++.h> using name ...
- 2个月,我从编程小白成为了Python研发工程师
从编程小白,到Python研发工程师,需要多久呢? 答案就是:91门课,450个小时. 听起来似乎难以实现,但其实如果每天抽出八小时学习,两个月的时间,就能由编程小白转变成为Python工程师,听起来 ...
- layui树形结构更改
/* * 将json字符串更改为layui.tree所用的数据结构类型,输出仍然为json字符串 * tanghao 7.29 */ function dataToTreeData(oData_str ...
- lnmp1.5一键安装包安装lnmpa后,添加站点
lnmp1.5一键安装包安装lnmpa后,添加站点 (1)添加站点 (2)配置apache配置文件 在/usr/local/apache/conf/vhost文件夹下,修改webApp站点配置文件ap ...