jquery 在页面上根据ID定位(jQuery锚点跳转及相关操作)
JQuery下锚点的平滑跳转
对于锚点的平滑跳转,在一般的商业性质的网站上,权衡来说,要谨慎使用。
例如:让页面平滑滚动到一个id为box的元素处,则JQuery代码只要一句话,关键位置 如下:
$(“html,body”).animate({scrollTop:$(“#box”).offset().top},1000)
其中animate为JQuery的自定义动画方法,$(“#box”).offset().top表示id为box的JQuery对象距离页面顶部的偏移值,1000表示平滑动画执行的时间为1000毫秒,也就是1秒。
// 页面内向导
$(".brief p").click(function (e) {
$(this).addClass("active_p").siblings().removeClass("active_p");
var v_id = e.target.id;
if (v_id === 'se_advantage') {
$("html, body").animate({ scrollTop: $(".advantage").offset().top }, 1000)
} else if (v_id === 'flow') {
$("html, body").animate({ scrollTop: $(".procedure").offset().top }, 1000)
} else {
$("html, body").animate({ scrollTop: $(".objective").offset().top }, 1000)
}
});
var v_id = e.target.id; 是获取被点击元素的id
jquery 在页面上根据ID定位(jQuery锚点跳转及相关操作)的更多相关文章
- jquery 在页面上根据ID定位(jQuery锚点跳转及相关操作) 经典
1.锚点跳转简介 Edit 锚点其实就是可以让页面定位到某个位置上的点.在高度较高的页面中经常见到.比如百度的百科页面,wiki中的page内容. 我知道实现锚点的跳转有两种形式,一种是a标签+nam ...
- 如何在一个页面上让多个jQuery
如何在一个页面上让多个jQuery共存呢?比如jquery-1.5和jquery-1.11. 你可能会问,为什么需要在一个页面上让多个jQuery共存?直接引用最新版本的jQuery不行吗? 答案是, ...
- Javascript/jQuery根据页面上表格创建新汇总表格
任务背景及需求 按页面上的现成表格,用js生成新的统计表格如下: 实现思路 1,把表格数据抽取出来生成json数组 2,计算表格总数并创建空表格 3,历遍json数组把数据动态插入所有的表格,设值/a ...
- Jquery实现页面上所有的checkbox只能选中一个
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- android 通过页面上关键字快速定位代码
这里定位微信关于页面, 当然可以直接获取当前最顶层activity 反编译apk后 搜索 strings.xml,找到对应id 搜索文件到用到id对应的成员变量,通常 是在R*.smali文件中 字符 ...
- html,图片上传预览,input file获取文件等相关操作
input file常用方法: var obj=document.getElementById("upimage"); var file=obj.files[0];//获取文件数据 ...
- easyui页面上字段排序并与后台交互
在开始对easyui里面页面上进行排序,感觉应该不怎么难,但是在操作的时候并没有那么简单,上网也查了很多进行排序的方法,最终总结出这个方法,供大家参考使用: 一.在easyui里面上只需 1.将要进行 ...
- jQuery手机端上拉刷新下拉加载更多页面
基于jQuery手机端上拉下拉刷新页面代码.这是一款类似QQ空间客户端或者微信下拉刷新页面特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id=" ...
- jQuery实现页面元素智能定位
实现过程 Js侦听滚动事件,当页面滚动的距离(页面滚动的高度)超出了对象(要滚动的层)距离页面顶部的高度,即要滚动的层到达了浏览器窗口上边缘时,立即将对象定位属性position值改成fixed(固定 ...
随机推荐
- react native 实现TODO APP
前端有一个todo app非常适合入门练手 react-native 实现todo app:https://github.com/nwgdegitHub/TODO_RN.git
- jsp大文件下载+断点续传
以多线程.断点续传方式下载文件,经常出现下载下来的文件大小和服务端一致,但是却无法正常打开的现象,搞了很久,贴下我的实现方式,请各位多多指教思路:1.将下载文件的处理放在自定义的线程类中,每下载一个文 ...
- FLASH位宽为8、16、32时,CPU与外设之间地址线的连接方法
转 http://blog.csdn.net/linweig/article/details/5556819 flash连接CPU时,根据不同的数据宽度,比如16位的NOR FLASH (A0-A19 ...
- uploadify上传插件参数的一些设置
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- [CSP-S模拟测试]:炼金术士的疑惑(模拟+数学+高斯消元)
题目传送门(内部题70) 输入格式 第一行一个正整数$n$,表示炼金术士已知的热化学方程式数量.接下来$n$行,每行一个炼金术士已知的热化学方程式.最后一行一个炼金术士想要求解的热化学方程式,末尾记为 ...
- ios8来了,屏幕更大,准备好使用 iOS Auto Layout了吗?
引言: Auto Layout是iOS6发布后引入的一个全新的布局特性,其目的是弥补以往autoresizing在布局方面的不足之处,以及未来面对更多尺寸适配时界面布局可以更好的适应. 要完全掌握Au ...
- ES6 二进制和八进制字面量
ES6 支持二进制和八进制的字面量,通过在数字前面添加 0o 或者 0O 即可将其转换为二进制值: let oValue = 0o10; console.log(oValue); // 8 let b ...
- flask中的Configuration为何这样写
flask中的Configuration flask中,我们需要用到很多配置.我们知道最简单的flask是: from flask import Flask app = Flask(__name__) ...
- 图解SQLSERVER联合查询和连接查询的区别
相信很多人都会用SQLSERVER联合查询和连接查询,但是用起来不一定都得心应手,对于其中的原理可能就模糊不清了,要想很牢固地掌握和运用SQL联合查询和连接查询机制,必须对其根本原理有很清晰认识, ...
- 自定义类实现原生SQL的GROUP_CONCAT的功能
大家都知道,原生的SQL为我们提供了分组之后查找组内数据的办法:GROUP_CONCAT方法:但是对于用Django开发的程序员来说-Django自带的ORM并没有内置这样功能的方法,而每一次遇到这样 ...