1. 1.锚点跳转简介
  2. Edit
  3. 锚点其实就是可以让页面定位到某个位置上的点。在高度较高的页面中经常见到。比如百度的百科页面,wiki中的page内容。
  4.  
  5. 我知道实现锚点的跳转有两种形式,一种是a标签+name属性;还有一种就是使用标签的id属性。百度百科就是使用a标签的name属性来实现锚点跳转的。
  6.  
  7. 比如:
  8.  
  9. <a href=”#2”>波轮洗衣机介绍</a> <a name=”2”></a>
  10. 但是上种方法使用了一个空标签,而且有时候会出现锚点失效。所以建议采用id来绑定锚点,代码如下:
  11.  
  12. <a href=”#2”>波轮洗衣机介绍 <h2 id=”2”>波轮洗衣机介绍</h2>
  13. 2.含锚点跳转的URL地址
  14. Edit
  15. 1】关于#
  16.  
  17. 在页面的制作中,”#”的符号很常见,并且具有通用性。基本上,其表示的含义是id选择符。例如:CSS中#header{}就表示idheader的标签的样式如何;在jQuery中,$(“#header”)表示选择idheader的标签为JQuery对象;同样的,在页面的URL中,”#”也可以理解为id选择符之意,也就是页面跳转到含URL指向的id的标签处。
  18.  
  19. 例如输入一个地址 http://baike.baidu.com/view/121416.htm?pf=1#3
  20.  
  21. 这个地址中末尾有个”#”,这个就相当于告诉浏览器要跳转了,#后面跟着的3表示会在http://baike.baidu.com/view/121416.htm?pf=1 的页面中寻找符合”#3”特点的标签,并且执行跳转。
  22.  
  23. 2】关于空锚点指向
  24.  
  25. 如果URL中的”#”后面跟随的字符id在文中找不到,就会有两种情况:如果是在当前页面,除了URL地址变化了,其它的不会改变,页面不会有跳转;如果是从其它页面跳转过来,则页面会在顶部显示,”#”基本就是聋子的耳朵——摆设。
  26.  
  27. 3.JQuery下锚点的平滑跳转
  28. Edit
  29. 对于锚点的平滑跳转,在一般的商业性质的网站上,权衡来说,要谨慎使用。
  30.  
  31. 例如:让页面平滑滚动到一个idbox的元素处,则JQuery代码只要一句话,关键位置 如下:
  32.  
  33. $(“html,body”).animate({scrollTop:$(“#box”).offset().top},1000)
  34. 其中animateJQuery的自定义动画方法,$(“#box”).offset().top表示idboxJQuery对象距离页面顶部的偏移值,1000表示平滑动画执行的时间为1000毫秒,也就是1秒。
  35.  
  36. 4.IE下锚点刷新失效及JQuery下的解决
  37. Edit
  38. 1】关于锚点刷新失效
  39.  
  40. 锚点刷新失效就是指当按下刷新键F5时,即使此时URL的后面就随锚点,此锚点也是不起作用的。
  41.  
  42. 2】在JQuery中,不难实现。可以根据URL获取锚点,从而进一步获得对应锚点对象,然后再让页面的滚动高度为其距离页面顶部的偏移值就可以了。使得页面无论是重新载入还是其刷新,其后面的锚点都起作用。
  43.  
  44. js代码如下:
  45.  
  46. $(function(){
  47. var url = window.location.toString();
  48. var id = url.split(“#”)[1];
  49. if(id){
  50. var t = $(“#”+id).offset().top;
  51. $(window).scrollTop(t);
  52. }
  53. });

原网址https://www.cnblogs.com/zst062102/p/6404705.html  谢谢

jquery 在页面上根据ID定位(jQuery锚点跳转及相关操作) 经典的更多相关文章

  1. jquery 在页面上根据ID定位(jQuery锚点跳转及相关操作)

    JQuery下锚点的平滑跳转 对于锚点的平滑跳转,在一般的商业性质的网站上,权衡来说,要谨慎使用. 例如:让页面平滑滚动到一个id为box的元素处,则JQuery代码只要一句话,关键位置 如下: $( ...

  2. 如何在一个页面上让多个jQuery

    如何在一个页面上让多个jQuery共存呢?比如jquery-1.5和jquery-1.11. 你可能会问,为什么需要在一个页面上让多个jQuery共存?直接引用最新版本的jQuery不行吗? 答案是, ...

  3. Javascript/jQuery根据页面上表格创建新汇总表格

    任务背景及需求 按页面上的现成表格,用js生成新的统计表格如下: 实现思路 1,把表格数据抽取出来生成json数组 2,计算表格总数并创建空表格 3,历遍json数组把数据动态插入所有的表格,设值/a ...

  4. Jquery实现页面上所有的checkbox只能选中一个

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  5. android 通过页面上关键字快速定位代码

    这里定位微信关于页面, 当然可以直接获取当前最顶层activity 反编译apk后 搜索 strings.xml,找到对应id 搜索文件到用到id对应的成员变量,通常 是在R*.smali文件中 字符 ...

  6. html,图片上传预览,input file获取文件等相关操作

    input file常用方法: var obj=document.getElementById("upimage"); var file=obj.files[0];//获取文件数据 ...

  7. easyui页面上字段排序并与后台交互

    在开始对easyui里面页面上进行排序,感觉应该不怎么难,但是在操作的时候并没有那么简单,上网也查了很多进行排序的方法,最终总结出这个方法,供大家参考使用: 一.在easyui里面上只需 1.将要进行 ...

  8. jQuery手机端上拉刷新下拉加载更多页面

    基于jQuery手机端上拉下拉刷新页面代码.这是一款类似QQ空间客户端或者微信下拉刷新页面特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id=" ...

  9. jQuery实现页面元素智能定位

    实现过程 Js侦听滚动事件,当页面滚动的距离(页面滚动的高度)超出了对象(要滚动的层)距离页面顶部的高度,即要滚动的层到达了浏览器窗口上边缘时,立即将对象定位属性position值改成fixed(固定 ...

随机推荐

  1. jpa-规范

    看图

  2. Execution failed for task ':compileDebugAidl'.

    昨天终于升级了下Ubuntu系统到16.04LTS,之前是12.04LTS(导致内网一些同事开发的网址无法打开,以及其他工具软件无法安装). 安装完android开发工具,运行之前的project,出 ...

  3. mysql YEARWEEK(date[,mode]) 函数 查询上周数据 以及本周数据

    通常使用下边sql即可(如果数据库设置了周一为一周起始的话):  查询上周数据(addtime为datetime格式)  SELECT id,addtime FROM mall_order WHERE ...

  4. Linear SVM和LR的区别和联系

    首先,SVM和LR(Logistic Regression)都是分类算法.SVM通常有4个核函数,其中一个是线性核,当使用线性核时,SVM就是Linear SVM,其实就是一个线性分类器,而LR也是一 ...

  5. MySQL processlist中需要关注的状态

    一般而言,我们在processlist结果中如果经常能看到某些SQL的话,至少可以说明这些SQL的频率很高,通常需要对这些SQL进行进一步优化. 今天我们要说的是,在processlist中,看到哪些 ...

  6. PHP会员找回密码功能实现实例介绍

    设置思路 1.用户注册时需要提供一个E-MAIL邮箱,目的就是用该邮箱找回密码. 2.当用户忘记密码或用户名时,点击登录页面的“找回密码”超链接,打开表单,并输入注册用的E-MAIL邮箱,提交. 3. ...

  7. 关于 Docker Hub 上不能注册 Docker ID 的问题

    1. 引言 我们中国大陆访问dockerhub的时候,想要注册一个dockerID,发现sign up按钮是灰色的,不能点击进行注册.这个时候通过点击右键"查看网页源代码"和&qu ...

  8. Android Glide 源码分析系列(待完成)

    参考:https://jekton.github.io/2018/06/08/glide-disk-cache/ 参考:https://jekton.github.io/2018/06/20/glid ...

  9. jquery.cookie.js写入的值没有定义

    这个是插件的基本语法,你写的没错,错就错在你肯定是在本地测试的,cookie是基于域名来储存的.意思您要放到测试服务器上或者本地localhost服务器上才会生效.cookie具有不同域名下储存不可共 ...

  10. linux服务器ssh防爆破

    查看爆破次数记录 # cat /var/log/secure | awk '/Failed/{print $(NF-3)}' | sort | uniq -c | awk '{print $2&quo ...