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 插件 还可以,但是 ...
随机推荐
- css3制作网页动画
一.CSS3变形 CSS3变形是一些效果的集合 如平移.旋转.缩放.倾斜效果 每个效果都可以称为变形(transform),它们可以分别操控元素发生平移.旋转.缩放.倾斜等变化 二.CSS3位移:tr ...
- vue router的嵌套使用与传值的query方式
嵌套路由 当我们不满足与 /home这种路由,而是希望通过 /home/news和/home/message访问一些内内容 那么就需要嵌套路由了 实现嵌套路由有两个步骤: ·创建对应的子组件,并且在路 ...
- IDEA的Debug模式灰色无法运行
1. 检查本地环境是否配置得当,进入项目右键看项目是否可以正常debug运行 2. 如果不可运行,那么选择File--Project Structrue 3. 修改Src文件,如图然后就可以正常使用 ...
- UVa 12050 - Palindrome Numbers (回文数)
A palindrome is a word, number, or phrase that reads the same forwards as backwards. For example, th ...
- 多模块打war包
1.在启动类的那个模块中的pom.xml中加入<packaging>war</packaging> 就这句 <groupId>com.mybatis</gr ...
- Appium学习2-Appium-desktop的使用
安装: 下载路径:https://github.com/appium/appium-desktop/releases 选择最新的安装包即可. 使用 1.点击打开应用程序,进入到配置项. 2.配置以下信 ...
- 搭建 Review Board - SVN 审核工具
一.安装环境 CentOS-6.7,ReviewBoard-2.5.1.1 二.安装环境的配置 1.确认当前系统中有如下包,若没有,使用yum安装 httpd-2.2.15:httpd 指的是apac ...
- Java Set集合的详解
一,Set Set:注重独一无二的性质,该体系集合可以知道某物是否已近存在于集合中,不会存储重复的元素 用于存储无序(存入和取出的顺序不一定相同)元素,值不能重复. 对象的相等性 引用到堆上同一个对象 ...
- 第一篇 网站基础知识 第4章 Java中Socket的用法
第4章 Java中Socket的用法 4.1 普通Socket的用法 Java中的网络通信是通过Socket实现的,Socket分为ServetSocket和Socket两大类,ServetSocke ...
- pycharm项目移植过程中遇到的问题
调试中遇到三个问题: 问题1:Error running 'run_all_test': Cannot run program "C:\Users\Administrator\.virtu ...