jquery 在页面上根据ID定位(jQuery锚点跳转及相关操作) 经典
- 1.锚点跳转简介
- Edit
- 锚点其实就是可以让页面定位到某个位置上的点。在高度较高的页面中经常见到。比如百度的百科页面,wiki中的page内容。
- 我知道实现锚点的跳转有两种形式,一种是a标签+name属性;还有一种就是使用标签的id属性。百度百科就是使用a标签的name属性来实现锚点跳转的。
- 比如:
- <a href=”#2”>波轮洗衣机介绍</a> <a name=”2”></a>
- 但是上种方法使用了一个空标签,而且有时候会出现锚点失效。所以建议采用id来绑定锚点,代码如下:
- <a href=”#2”>波轮洗衣机介绍 <h2 id=”2”>波轮洗衣机介绍</h2>
- 2.含锚点跳转的URL地址
- Edit
- 【1】关于#
- 在页面的制作中,”#”的符号很常见,并且具有通用性。基本上,其表示的含义是id选择符。例如:CSS中#header{}就表示id为header的标签的样式如何;在jQuery中,$(“#header”)表示选择id为header的标签为JQuery对象;同样的,在页面的URL中,”#”也可以理解为id选择符之意,也就是页面跳转到含URL指向的id的标签处。
- 例如输入一个地址 http://baike.baidu.com/view/121416.htm?pf=1#3
- 这个地址中末尾有个”#”,这个就相当于告诉浏览器要跳转了,#后面跟着的3表示会在http://baike.baidu.com/view/121416.htm?pf=1 的页面中寻找符合”#3”特点的标签,并且执行跳转。
- 【2】关于空锚点指向
- 如果URL中的”#”后面跟随的字符id在文中找不到,就会有两种情况:如果是在当前页面,除了URL地址变化了,其它的不会改变,页面不会有跳转;如果是从其它页面跳转过来,则页面会在顶部显示,”#”基本就是聋子的耳朵——摆设。
- 3.JQuery下锚点的平滑跳转
- Edit
- 对于锚点的平滑跳转,在一般的商业性质的网站上,权衡来说,要谨慎使用。
- 例如:让页面平滑滚动到一个id为box的元素处,则JQuery代码只要一句话,关键位置 如下:
- $(“html,body”).animate({scrollTop:$(“#box”).offset().top},1000)
- 其中animate为JQuery的自定义动画方法,$(“#box”).offset().top表示id为box的JQuery对象距离页面顶部的偏移值,1000表示平滑动画执行的时间为1000毫秒,也就是1秒。
- 4.IE下锚点刷新失效及JQuery下的解决
- Edit
- 【1】关于锚点刷新失效
- 锚点刷新失效就是指当按下刷新键F5时,即使此时URL的后面就随锚点,此锚点也是不起作用的。
- 【2】在JQuery中,不难实现。可以根据URL获取锚点,从而进一步获得对应锚点对象,然后再让页面的滚动高度为其距离页面顶部的偏移值就可以了。使得页面无论是重新载入还是其刷新,其后面的锚点都起作用。
- 其js代码如下:
- $(function(){
- var url = window.location.toString();
- var id = url.split(“#”)[1];
- if(id){
- var t = $(“#”+id).offset().top;
- $(window).scrollTop(t);
- }
- });
原网址https://www.cnblogs.com/zst062102/p/6404705.html 谢谢
jquery 在页面上根据ID定位(jQuery锚点跳转及相关操作) 经典的更多相关文章
- jquery 在页面上根据ID定位(jQuery锚点跳转及相关操作)
JQuery下锚点的平滑跳转 对于锚点的平滑跳转,在一般的商业性质的网站上,权衡来说,要谨慎使用. 例如:让页面平滑滚动到一个id为box的元素处,则JQuery代码只要一句话,关键位置 如下: $( ...
- 如何在一个页面上让多个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(固定 ...
随机推荐
- jpa-规范
看图
- Execution failed for task ':compileDebugAidl'.
昨天终于升级了下Ubuntu系统到16.04LTS,之前是12.04LTS(导致内网一些同事开发的网址无法打开,以及其他工具软件无法安装). 安装完android开发工具,运行之前的project,出 ...
- mysql YEARWEEK(date[,mode]) 函数 查询上周数据 以及本周数据
通常使用下边sql即可(如果数据库设置了周一为一周起始的话): 查询上周数据(addtime为datetime格式) SELECT id,addtime FROM mall_order WHERE ...
- Linear SVM和LR的区别和联系
首先,SVM和LR(Logistic Regression)都是分类算法.SVM通常有4个核函数,其中一个是线性核,当使用线性核时,SVM就是Linear SVM,其实就是一个线性分类器,而LR也是一 ...
- MySQL processlist中需要关注的状态
一般而言,我们在processlist结果中如果经常能看到某些SQL的话,至少可以说明这些SQL的频率很高,通常需要对这些SQL进行进一步优化. 今天我们要说的是,在processlist中,看到哪些 ...
- PHP会员找回密码功能实现实例介绍
设置思路 1.用户注册时需要提供一个E-MAIL邮箱,目的就是用该邮箱找回密码. 2.当用户忘记密码或用户名时,点击登录页面的“找回密码”超链接,打开表单,并输入注册用的E-MAIL邮箱,提交. 3. ...
- 关于 Docker Hub 上不能注册 Docker ID 的问题
1. 引言 我们中国大陆访问dockerhub的时候,想要注册一个dockerID,发现sign up按钮是灰色的,不能点击进行注册.这个时候通过点击右键"查看网页源代码"和&qu ...
- Android Glide 源码分析系列(待完成)
参考:https://jekton.github.io/2018/06/08/glide-disk-cache/ 参考:https://jekton.github.io/2018/06/20/glid ...
- jquery.cookie.js写入的值没有定义
这个是插件的基本语法,你写的没错,错就错在你肯定是在本地测试的,cookie是基于域名来储存的.意思您要放到测试服务器上或者本地localhost服务器上才会生效.cookie具有不同域名下储存不可共 ...
- linux服务器ssh防爆破
查看爆破次数记录 # cat /var/log/secure | awk '/Failed/{print $(NF-3)}' | sort | uniq -c | awk '{print $2&quo ...