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 插件 还可以,但是 ...
随机推荐
- laravel封装返回json信息工具类
1.工具类可以一次写入多方多方调用,很大程度的节约开发时间得到想要的信息 这里演示一个json接口的工具类(文件定义在App\Http\Controllers\Tools)中 <?php /** ...
- react-native构建基本页面3---路由配置
安装路由 运行yarn add react-native-router-flux 路由官网 路由相关配置 路由简单的DEMO // Main 才是项目的根组件 import React, { Comp ...
- 如何通过注解方式给项目添加Swagger功能
在Java后端,每次开发一个新的接口后需要自测,此时可以借助Swagger功能很好地完成自测,下面将通过注解的方式来添加Swagger. (1)代码部分 package com.bien.edge; ...
- 压缩软件推荐(bandizip)
提及 Windows 平台的压缩软件,大家往往想起老牌的 WinRAR.开源免费的 7-Zip.国产的快压.好压.360 压缩之类,甚至还有时代的眼泪 WinZip.一直以来,压缩软件因为作为十分基础 ...
- 51Nod 1432 独木舟 (贪心)
n个人,已知每个人体重.独木舟承重固定,每只独木舟最多坐两个人,可以坐一个人或者两个人.显然要求总重量不超过独木舟承重,假设每个人体重也不超过独木舟承重,问最少需要几只独木舟? Input 第一行包含 ...
- Alice and Hairdresser
Alice's hair is growing by leaps and bounds. Maybe the cause of it is the excess of vitamins, or may ...
- URLSearchParams/FormData
一.URLSearchParams()(很好用,但有一定兼容问题,未来版本的浏览器中该功能的语法和行为可能随对应的标准文档而改变.) URLSearchParams 接口定义了一些实用的方法来处理 U ...
- [CF91B] Queue - 权值线段树
有n个人在队列中等待.假如某个人前面有一个人年龄比他小,那他就会不高兴:定义他的"不高兴度"为他前面留他最远的年龄比他小的人与他的距离,求每个人的不高兴度. n<=10^5 ...
- [Agc005D/At2060] Minimum Sum - 单调栈
鉴于早上那题让我怀疑单调栈白学,特意来复习下单调栈 题意 考虑按照每个元素对答案的贡献来统计,那么我们只需要找到每个元素左边右边第一个比它小的就可 这题给的又是排列,简直不能再良心 #include ...
- Wannafly Camp 2020 Day 6N. 合并!
#include <bits/stdc++.h> using namespace std; int n,a[2005]; int main() { long long ans=0; cin ...