1. //监控,下拉750px后展示导航
  2. $(window).scroll(function(){
  3. var $this = $(this);
  4. var targetTop = $(this).scrollTop();
  5. if(targetTop > 750){
  6. $("#fixed-menu").css('display','block');
  7. }else{
  8. $("#fixed-menu").css('display','none');
  9. }
  10. });
  11.  
  12. //点击导航自动活动到页面
  13. $(".link1").click(function(){
  14. $('body,html').animate({'scrollTop':$(".fwjs").offset().top},800)
  15. });
  16.  
  17. $(".link2").click(function(){
  18. $('body,html').animate({'scrollTop':$("#zzlc").offset().top},800)
  19. });
  20.  
  21. $(".link3").click(function(){
  22. $('body,html').animate({'scrollTop':$(".clzb").offset().top},800)
  23. });
  24.  
  25. $(".link4").click(function(){
  26. $('body,html').animate({'scrollTop':$("#xzfxq").offset().top},800)
  27. });
  28.  
  29. $(".link5").click(function(){
  30. $('body,html').animate({'scrollTop':$("#gwtd").offset().top},800)
  31. });
  32.  
  33. $(".link6").click(function(){
  34. $('body,html').animate({'scrollTop':$("#cjwt").offset().top},800)
  35. });

js实现页面下拉后展示导航,以及点击导航自动滑动到相关页面的更多相关文章

  1. JS列表的下拉菜单组件(仿美化控件select)

    JS列表的下拉菜单组件(仿美化控件select) 2014-01-23 23:51 by 龙恩0707, 1101 阅读, 6 评论, 收藏, 编辑 今天是农历23 也是小年,在这祝福大家新年快乐!今 ...

  2. 代码: 两列图片瀑布流(一次后台取数据,图片懒加载。下拉后分批显示图片。图片高度未知,当图片onload后才显示容器)

    代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到 ...

  3. 页面滚动动态加载数据,页面下拉自动加载内容 jquery

    <!DOCTYPE=html> <html> <head> < script src="js/jquery.js" type=" ...

  4. Jquery页面滚动动态加载数据,页面下拉自动加载内容

    <!DOCTYPE=html> <html> <head> <script src="js/jquery.js" type="t ...

  5. 微信小程序 禁止ios页面下拉下滑滚动 出现空白的情况

    项目需要做了一个图片拖动指定组件上删除,和排序的功能android测试正常, ios会出现拖动图片页面也跟着下滑的尴尬情况. 查文档下拉刷新配置默认是关闭的,后经查找文档发现在本页面page.json ...

  6. bootstrap-multiselect.js多选下拉框初始化时默认选中初始值

    bootstrap-multiselect.js多选下拉框默认值设置 一.案例数据格式  二.HTML代码 <select id="msgRoles" multiple=&q ...

  7. jq自定义下拉菜单,当用户点击非自身元素(下拉菜单)本身时关闭下拉菜单

    jq自定义下拉菜单,当用户点击非自身元素(下拉菜单)本身时关闭下拉菜单 截图: 代码如下: //关闭用户菜单 $(document).mousedown(function(e){ var _con = ...

  8. H5页面基于iScroll.js插件实现下拉刷新,上拉加载更多

    前言 在我之前的项目中,页面总是干巴巴的,用户的体验不是特别完美,我也是一直觉得把设计师给到的psd做出来就好,很少考虑用户的感受.我喜欢看不同的App,操作每个步骤,观赏每个能和我互动的交互设计效果 ...

  9. H5页面下拉加载更多(实用版)

    近期在做一个H5网站,需要下拉加载更多产品列表的功能.百度搜索了好久,什么说法都有,什么插件都有.   醉了.基本上每一个能直接拿来用的. 最后发现: 1.dropload.js 插件  还可以,但是 ...

随机推荐

  1. css3制作网页动画

    一.CSS3变形 CSS3变形是一些效果的集合 如平移.旋转.缩放.倾斜效果 每个效果都可以称为变形(transform),它们可以分别操控元素发生平移.旋转.缩放.倾斜等变化 二.CSS3位移:tr ...

  2. vue router的嵌套使用与传值的query方式

    嵌套路由 当我们不满足与 /home这种路由,而是希望通过 /home/news和/home/message访问一些内内容 那么就需要嵌套路由了 实现嵌套路由有两个步骤: ·创建对应的子组件,并且在路 ...

  3. IDEA的Debug模式灰色无法运行

    1. 检查本地环境是否配置得当,进入项目右键看项目是否可以正常debug运行 2.  如果不可运行,那么选择File--Project Structrue 3. 修改Src文件,如图然后就可以正常使用 ...

  4. UVa 12050 - Palindrome Numbers (回文数)

    A palindrome is a word, number, or phrase that reads the same forwards as backwards. For example, th ...

  5. 多模块打war包

    1.在启动类的那个模块中的pom.xml中加入<packaging>war</packaging>  就这句 <groupId>com.mybatis</gr ...

  6. Appium学习2-Appium-desktop的使用

    安装: 下载路径:https://github.com/appium/appium-desktop/releases 选择最新的安装包即可. 使用 1.点击打开应用程序,进入到配置项. 2.配置以下信 ...

  7. 搭建 Review Board - SVN 审核工具

    一.安装环境 CentOS-6.7,ReviewBoard-2.5.1.1 二.安装环境的配置 1.确认当前系统中有如下包,若没有,使用yum安装 httpd-2.2.15:httpd 指的是apac ...

  8. Java Set集合的详解

    一,Set Set:注重独一无二的性质,该体系集合可以知道某物是否已近存在于集合中,不会存储重复的元素 用于存储无序(存入和取出的顺序不一定相同)元素,值不能重复. 对象的相等性 引用到堆上同一个对象 ...

  9. 第一篇 网站基础知识 第4章 Java中Socket的用法

    第4章 Java中Socket的用法 4.1 普通Socket的用法 Java中的网络通信是通过Socket实现的,Socket分为ServetSocket和Socket两大类,ServetSocke ...

  10. pycharm项目移植过程中遇到的问题

     调试中遇到三个问题: 问题1:Error running 'run_all_test': Cannot run program "C:\Users\Administrator\.virtu ...