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锚点跳转及相关操作) 经典的更多相关文章

  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. Android:如何生成自己的keystore(zz)

    keystore不设置的话默认使用的是C:\Users\Fly\.Android下面的debug.keystore,每台电脑的都不一样,所以导致了无法安装的情况. 如何生成自己的keystore呢?这 ...

  2. vue-cli使用sockjs即时通信

    基于webSocket通信的库主要有 socket.io,SockJS,这次用的是 SockJS. 这里我们使用sockjs-client.stomjs这两个模块,要实现webSocket通信,需要后 ...

  3. Docker国内镜像source

    现在使用docker的镜像大多基于几种基本Linux系统.虽然我不需要在容器李安装很多东西,但经常需要一些必要的工具,而基础镜像里并不包含,比如vim, ifconfig, curl等.考虑下载速度, ...

  4. 使用多个项目生成Xml文件来显示帮助文档

    终于到这了,我们首先将Product单独作为一个项目 WebAPI2PostMan.WebModel 并引用他,查看文档如下. 你会发现,你的注释也就是属性的描述没有了.打开App_Data/XmlD ...

  5. memcache源码编译安装

    问题描述: memcached未授权漏洞.运行账户root,对未授权,官方也没有账户认证,也想不明白,为啥不搞个账户认证memcached..... 问题解决: 未授权,网上大部分通过防火墙实现对未知 ...

  6. 10分钟上手图数据库Neo4j

    随着互联网不断的发展,传统的关系型数据库如oracle,mysql已经难以支撑现下大数据量,高并发的场景了.于是,NoSQL横空出世,有像cassandra这样的column-based,像Mongo ...

  7. 树莓派进阶之路 (037) - 设置树莓派3 B+的静态IP

    修改/etc/dhcpcd.conf 文件 sudo vim /etc/dhcpcd.conf interface eth0 static ip_address= static routers=192 ...

  8. [转]decorators.xml的用法

    原文地址:https://blog.csdn.net/laozhuxiao/article/details/54342121 简介: sitemesh应用Decorator模式,用filter截取re ...

  9. C语言 · 还款计算

    标题: 还款计算 银行贷款的等额本息还款方法是: 每月还固定的金额,在约定的期数内正好还完(最后一个月可能会有微小的零头出入). 比如说小明在银行贷款1万元.贷款年化利率为5%,贷款期限为24个月. ...

  10. Java编程的逻辑 (95) - Java 8的日期和时间API

    ​本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http: ...