html 锚点的使用
html 锚点 到底是干吗的?
通俗简单地说,比如一篇很长的文章,你想按分段精确来看,那就可以用到锚点了。
代码:
<a href="#001">跳到001</a>
...文字省略
<a name="001" id="001" ></a>
...文字省略
其实锚点只需name就可以可,加id是为了让它兼容性更好.
href的值要跟name \ i d 一致,前面必须加"#",以上代码在ie6/7,ff中都可以兼容,但在ie8中就不行。
因为我们锚点的<a></a>值为空,为不影响美观我们加个空格就行了,
如以下代码,就可以兼容ie8
<a href="#001">跳到001</a>
...文字省略
<a name="001" id="001" > </a>
...文字省略
另一问题,想显示某页面(如:123.html)的某锚点内容呢?
代码如下
<a href="123.html#001">跳到001</a>
...文字省略
<a name="001" id="001" > </a>
...文字省略
html 锚点的使用的更多相关文章
- 原生js模拟锚点,实现点击后,内容定位到本页的对应位置
今天在做angularJS项目过程中,遇见了一个需求,在一个页面中有多个表格,每个表格都有对应的分页,点击顶部对应的模块,可以定位到每个表格模块具体的位置. 页面如下所示: 在angular中,为了使 ...
- 了解HTML锚点
概念 <a>元素 (或HTML锚元素, Anchor Element)通常用来表示一个锚点/链接.但严格来说,<a>元素不是一个链接,而是超文本锚点,可以链接到一个新文件.用i ...
- angularjs 锚点操作服务 $anchorScroll
在普通的html网页中,我们可以通过在url后边添加 #elementid 的方式,将页面显示定位到某个元素,也就是锚点. 但是在angularjs应用的网页中,页面路由的写法是 #route/ro ...
- js做通讯录的索引滑动显示效果和滑动显示锚点效果
只做实现..完全没考虑性能优化.所以我实现了以后特别卡. 第一个是在通讯录右边的索引条上进行滑动,滑动到相应字母就跳转到相应字母的锚点上. 思路:监听touchmove事件,获取clientX和cli ...
- jQuery实现页面内锚点平滑跳转
平时我们做导航滚动到内容都是通过锚点来做,刷的一下就直接跳到内容了,没有一丝的滚动效果,而且 url 链接最后会有“小尾巴”,就像#keleyi,今天我就介绍一款 jquery 做的滚动的特效,既可以 ...
- JQuery 实现锚点链接之间的平滑滚动
24. 解决链接锚点的生硬问题 $('.nav .btn[href*=#],.icon2,.icon3').click(function() { if (location.pathname.repla ...
- a 锚点跳转滑动效果
点击a链接时,跳转到相应id的位置处,有一个滑动效果. <a href="#my">我是跳转到div</a><div id="my" ...
- HTML meta锚点跳转 小tips
小tips meta锚点跳转 http://www.zhangxinxu.com/wordpress/2015/03/meta-http-equiv-refresh-content/
- Html锚点定位偏差计算解决插件
/*=============== 以下为HTML中的锚点代码 =====================*/ <div id="fixedNavBar" class=&qu ...
- 讨论SEO中是锚文本有效,还是纯文本有效呢?
现在很多SEO好友不断在讨论,在SEO优化中,到底是锚文本有效,还是纯文本有效呢? 在这里给大家举一下列子:如“张家口人才网”这样的就叫做锚文本,意思是在原有的文本中加上超级链接,指向到优化的网页上面 ...
随机推荐
- Android 中常用的布局
一.线性布局----LinearLayout horizontal 水平 <?xml version="1.0" encoding="utf-8"?& ...
- 《DSP using MATLAB》示例Example4.8
代码: b = [0,1]; a = [3, -4, 1]; % polynomials coefficients [R,p,c] = residuez(b,a) [b,a] = residuez(R ...
- [工作中的设计模式]适配器模式adapter
一.模式解析 适配器模式把一个类的接口变换成客户端所期待的另一种接口,从而使原本因接口不匹配而无法在一起工作的两个类能够在一起工作. 也就是说,如果已经写好了一个接口,但是又来了一种截然不同的接口,如 ...
- Java数组课后作业
1.运行TestArrays.java,了解Arrays中的一些重要方法的用法. Arrays.equals(a 1, a2):判断数组是否相等. int[] b = Arrays.copyOf(a, ...
- hdu 5727 Necklace dfs+二分图匹配
Necklace/center> 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=5727 Description SJX has 2*N mag ...
- Ue4 Shader博客
http://blog.csdn.net/noahzuo/article/details/51133166 国外HLSL网站 https://www.shadertoy.com/browse
- node.js--HTTP模块
HTTP模块 node.js提供了一个创建自己服务器的方式,用起来很简单,首先引用http模块 //引用HTTP模板 var http = require('http'); 创建服务实例:http.c ...
- ios 关于[xxx timeIntervalSinceNow]出现EXC_BAD_ACCESS错误的解决办法
[xxx timeIntervalSinceNow]出现EXC_BAD_ACCESS错误的主要原因是之前的[NSDate date]返回一个autoreleased的NSdata,其被释放掉 解决方法 ...
- CODEVS 1817 灾后重建 Label:Floyd || 最短瓶颈路
描述 灾后重建(rebuild) B地区在地震过后,所有村庄都造成了一定的损毁,而这场地震却没对公路造成什么影响.但是在村庄重建好之前,所有与未重建完成的村庄的公路均无法通车.换句话说,只有连接着两 ...
- [深入浅出Windows 10]不同平台设备的适配
2.3 不同平台设备的适配 Windows 10通用应用程序针对特定的平台还会有一个子API的集合,当我们要使用到某个平台的特定API的时候(比如手机相机硬件按钮触发事件),这时候就需要调用特定平台的 ...