制作锚点链接

锚点链接有什么作用呢?当一个页面过长,拖动起来非常的费劲,于是在本页面建立锚点链接,在本页面进行链接。

1、先举个例子,说下下锚点链接的概念。

如图所示,比如,如图所示是一个网页。

锚点链接的意思说就是:“abc”就是一个链接,我点击“abc”之后,就会跳转到"123"的位置上。

最常用的方式,在一个网页的开头,做一个目录,每一个目录都是一个锚点链接,然后链接到本页面相关的位置。

2、锚点链接的语法:<a name="锚点的名字"></a>,意思是在网页中的某一个位置,插入一个锚点<a href="#锚点的名字">显示的字样</a>

意思是在网页中的某一个位置链接之前设定的锚点,只要点击该链接,就会自动跳转到锚点处。

3、在body中增加一行:<a name="ch"></a>hello,我在这里,来找我啊,意思是创建一个锚点,锚点的名字为“ch”

4、看下网页的效果图:

5、接着,在body中,再增加一行代码:<a href="#ch">我来找你啦</a>,完整代码如图:

6、看网页效果图,当点击网页上面的链接后,就会跳转到下面的那行字。

7、最后,给一个完整的例子,代码如下:

8、网页效果如下:

9、点击“第一章”后,自动跳转到“第一章”所在的锚点

10、“第二章”和“第三章”的效果同上。

时间: 2024-08-26 14:29:55

制作锚点链接的相关文章

html邮件链接和锚点链接

锚点链接: 先设定一个锚点标记,后面点击锚点标记的时候页面自动到达锚点标记的位置. 设置标记: <a name="mn">锚点标记</a> <a href="#idmn">锚点的内容</a> 邮件链接: <a href="mailto:[email protected]?[email protected]"></a> <!--发送邮件给[email protected]

如何添加高质量的锚文本链接

标题:如何添加高质量的锚文本链接 内容:什么是锚文本链接我想大家都知道的,阿峰SEO在这里就不多说了,这个做网站优化的都知道的.怎么添加锚文本链接也不用多说,也是人尽皆知的.今天阿峰和大家谈谈的也是锚文本链接,但是是高质量的锚文本链接.什么是高质量的锚文本链接?它的作用是什么?如何添加高质量的锚文本链接,这个可不是所有人都知道的,很多朋友都做过锚文本链接,但是你可知道你做的是高质量还是低质量了? 一.什么是高质量锚文本链接 网上有很多制作锚文本的方法,质量良莠不齐,其中虽不乏高质量的分享,但是大

HTML锚点链接

1.锚点链接:就是一个页面你在最下面会看见一个"点击回到顶部"的按钮 如何使用: (1)在最上面写 <a name="top"></a> (2)在最下面写 <a type="#top"></a> 注意:下面type中的属性就是上面的name中属性加上一个#

锚点链接 阻止a标签跳转

  参考 http://blog.csdn.net/awe5566/article/details/22583699 href="#downJacket" 锚点链接 必须写: 但又想阻止a标签跳转(阻止默认的滚动监听,好自己设置scrollTop), onclick="return fales" <a href="#downJacket" onclick="return false;" >羽绒</a>

JQuery 实现锚点链接之间的平滑滚动

web开发前端一直用JQuery ,真正接触了才体会到,JQuery 原来比我想象的要强大的多,也可能比我体会到的还要强大的多,特别是兼容性那个好,于是把一些好玩的,酷炫的,能够取代 JS 的.统统给用上了. 从 JQuery 引入今天的正题.用 JQuery 实现锚点链接之间的平滑滚动.曾经介绍过一个用 JS 实现的页面锚点跳转缓冲特效,效果相当不错.能够在同一页面的锚点链接之间实现平滑的滚动,可是 JS 代码相对来说比較冗长.如今好了.仅仅要已经载入了 JQuery.我们就能够用较为简短的代

锚点链接

含义: 锚点链接,是在一个网页的不同区域进行跳转 使用步骤: 1  定义锚点(做个记号): <a   name="锚点记号"> </a> 锚点名称的命名规格: 可以包含字母,数字,下划线 以字母打头 <a>和</a> 之间没有内容,即这个记号不是让我们看到,是链接使用的 <a name="top1"></a> 2  跳转到锚点(记号): 语法 <a href="文件名#锚点名称&

jquery 监听所有锚点链接实现平滑移动

jquery 监听所有锚点链接实现平滑移动,地址栏上不会改变链接地址 //监听所有锚点链接实现平滑移动 $('a[href*=#],area[href*=#]').click(function() { if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { var $target = $(this.hash);

jquer导航锚点链接动画效果和返回顶部代码

1 $(function(){ 2 $(".index_nav li a").click(function(event){ //绑定按钮的单击事件 3 var index = this.title; //取得点击按钮的title属性,这里就是按钮的数字 4 // alert(index); 5 var id = "#" + "index_" + index; // 取得需要跳转到的div 的 id 6 // alert(id); 7 $(&quo

锚点链接以及hash属性

相信大家挺经常见过这样一个效果.有一个很长很长的页面,分成好几部分,目录中一点击,就能定位到页面某个位置. 例如:有这样一个目录,例如你点击一下“HTML”,就会直接跳转到“HTML”的页面位置 这就是锚点链接(也叫书签链接),常常用于那些内容庞大繁琐的网页,通过点击命名锚点,不仅让我们能指向文档,还能指向页面里的特定段落,更能当作"精准链接"的便利工具. 在长页面中,用锚点定位本页面的某个位置,那用锚点链接就可以了.用法很简单,代码demo如下: <!DOCTYPE html&