700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 前端:页面快速定位和返回顶部(锚点)

前端:页面快速定位和返回顶部(锚点)

时间:2019-05-30 08:46:58

相关推荐

前端:页面快速定位和返回顶部(锚点)

基本介绍

锚点页面定位以唯一id 或 name的形式跳转

以a标签为例

a标签里面包含herf属性用于写入跳转的定位

测试的文章篇幅最好是较多,因为跳转时才看的出来效果

基本写法

1,在a标签里面写入herf要跳转的地址,前面必须加上个#号,另外可以在标签里面写入一些内容,如下面所示:

<a href="#第一章">第一章节</a><br>

2,每一段内容用一个p标签包起来,并且给一个唯一id属性,用于与与a标签里面的herf属性对应,如下:

<p id="第一章">

这样a标签里的herf属性就与p标签的唯一标识联系起来了。

注意:p标签唯一id是什么,那么a 标签里面的herf属性要与其对应时就要写入p标签的id名,并且前面要写入#号

实例:

测试的源代码

<!DOCTYPE html><html><head><title></title></head><body><a href="#第一章">第一章节</a><br><a href="#第二章">第二章节</a><br><a href="#第三章">第三章节</a><br><a href="#第四章">第四章节</a><br><a href="#第五章">第五章节</a><br><p id="第一章">1,近日,中国科学院宁波材料技术与工程研究所、航天五院钱学森实验室、中国科学院物理研究所和南京大学等联合团队,对嫦娥五号月壤颗粒中的氦原子进行了探测和研究。发现月壤中钛铁矿颗粒表面都存在一层非晶玻璃。研究人员在玻璃层中观测到了大量的氦气泡,直径大约为5~25nm,且大部分气泡都位于玻璃层与晶体的界面附近。而在颗粒内部晶体中,基本没有氦气泡。鉴于氦在钛铁矿中的高溶解度,研究人员认为氦原子首先由太阳风注入钛铁矿晶格中,之后在晶格的沟道扩散效应下,氦会逐渐释放出来。而表层玻璃具有原子无序堆积结构,限制了氦原子的释放,被捕获并逐渐储存起来,形成了气泡。氦-3作为氦的一种同位素,在能源、科学研究等领域具有重要应用价值。100吨氦-3核聚变产生的能量即可供应全球使用1年,且氦-3核聚变过程无中子二次辐射危险,更加清洁和可控。另外,氦-3是获得极低温环境的关键制冷剂,是超导、量子计算、拓扑绝缘体等前沿研究领域的必需物质。然而,地球上氦元素主要是氦-4,氦-3储量只有0.5吨左右,远远无法满足现有需求。氦-3是太阳风的重要成分,月球由于常年受太阳风的辐照,储存了大量氦-3。但是为什么月球具有丰富的战略资源氦-3?氦-3在月球上是以什么形式储藏的?这些问题还没有明确的答案。探索月球资源,特别是氦-3的含量、分布和开采,已经</p><p id="第二章">2,近日,中国科学院宁波材料技术与工程研究所、航天五院钱学森实验室、中国科学院物理研究所和南京大学等联合团队,对嫦娥五号月壤颗粒中的氦原子进行了探测和研究。发现月壤中钛铁矿颗粒表面都存在一层非晶玻璃。研究人员在玻璃层中观测到了大量的氦气泡,直径大约为5~25nm,且大部分气泡都位于玻璃层与晶体的界面附近。而在颗粒内部晶体中,基本没有氦气泡。鉴于氦在钛铁矿中的高溶解度,研究人员认为氦原子首先由太阳风注入钛铁矿晶格中,之后在晶格的沟道扩散效应下,氦会逐渐释放出来。而表层玻璃具有原子无序堆积结构,限制了氦原子的释放,被捕获并逐渐储存起来,形成了气泡。氦-3作为氦的一种同位素,在能源、科学研究等领域具有重要应用价值。100吨氦-3核聚变产生的能量即可供应全球使用1年,且氦-3核聚变过程无中子二次辐射危险,更加清洁和可控。另外,氦-3是获得极低温环境的关键制冷剂,是超导、量子计算、拓扑绝缘体等前沿研究领域的必需物质。然而,地球上氦元素主要是氦-4,氦-3储量只有0.5吨左右,远远无法满足现有需求。氦-3是太阳风的重要成分,月球由于常年受太阳风的辐照,储存了大量氦-3。但是为什么月球具有丰富的战略资源氦-3?氦-3在月球上是以什么形式储藏的?这些问题还没有明确的答案。探索月球资源,特别是氦-3的含量、分布和开采,已经</p><p id="第三章">3,近日,中国科学院宁波材料技术与工程研究所、航天五院钱学森实验室、中国科学院物理研究所和南京大学等联合团队,对嫦娥五号月壤颗粒中的氦原子进行了探测和研究。发现月壤中钛铁矿颗粒表面都存在一层非晶玻璃。研究人员在玻璃层中观测到了大量的氦气泡,直径大约为5~25nm,且大部分气泡都位于玻璃层与晶体的界面附近。而在颗粒内部晶体中,基本没有氦气泡。鉴于氦在钛铁矿中的高溶解度,研究人员认为氦原子首先由太阳风注入钛铁矿晶格中,之后在晶格的沟道扩散效应下,氦会逐渐释放出来。而表层玻璃具有原子无序堆积结构,限制了氦原子的释放,被捕获并逐渐储存起来,形成了气泡。氦-3作为氦的一种同位素,在能源、科学研究等领域具有重要应用价值。100吨氦-3核聚变产生的能量即可供应全球使用1年,且氦-3核聚变过程无中子二次辐射危险,更加清洁和可控。另外,氦-3是获得极低温环境的关键制冷剂,是超导、量子计算、拓扑绝缘体等前沿研究领域的必需物质。然而,地球上氦元素主要是氦-4,氦-3储量只有0.5吨左右,远远无法满足现有需求。氦-3是太阳风的重要成分,月球由于常年受太阳风的辐照,储存了大量氦-3。但是为什么月球具有丰富的战略资源氦-3?氦-3在月球上是以什么形式储藏的?这些问题还没有明确的答案。探索月球资源,特别是氦-3的含量、分布和开采,已经</p><p id="第四章">4,近日,中国科学院宁波材料技术与工程研究所、航天五院钱学森实验室、中国科学院物理研究所和南京大学等联合团队,对嫦娥五号月壤颗粒中的氦原子进行了探测和研究。发现月壤中钛铁矿颗粒表面都存在一层非晶玻璃。研究人员在玻璃层中观测到了大量的氦气泡,直径大约为5~25nm,且大部分气泡都位于玻璃层与晶体的界面附近。而在颗粒内部晶体中,基本没有氦气泡。鉴于氦在钛铁矿中的高溶解度,研究人员认为氦原子首先由太阳风注入钛铁矿晶格中,之后在晶格的沟道扩散效应下,氦会逐渐释放出来。而表层玻璃具有原子无序堆积结构,限制了氦原子的释放,被捕获并逐渐储存起来,形成了气泡。氦-3作为氦的一种同位素,在能源、科学研究等领域具有重要应用价值。100吨氦-3核聚变产生的能量即可供应全球使用1年,且氦-3核聚变过程无中子二次辐射危险,更加清洁和可控。另外,氦-3是获得极低温环境的关键制冷剂,是超导、量子计算、拓扑绝缘体等前沿研究领域的必需物质。然而,地球上氦元素主要是氦-4,氦-3储量只有0.5吨左右,远远无法满足现有需求。氦-3是太阳风的重要成分,月球由于常年受太阳风的辐照,储存了大量氦-3。但是为什么月球具有丰富的战略资源氦-3?氦-3在月球上是以什么形式储藏的?这些问题还没有明确的答案。探索月球资源,特别是氦-3的含量、分布和开采,已经</p><p id="第五章">5,近日,中国科学院宁波材料技术与工程研究所、航天五院钱学森实验室、中国科学院物理研究所和南京大学等联合团队,对嫦娥五号月壤颗粒中的氦原子进行了探测和研究。发现月壤中钛铁矿颗粒表面都存在一层非晶玻璃。研究人员在玻璃层中观测到了大量的氦气泡,直径大约为5~25nm,且大部分气泡都位于玻璃层与晶体的界面附近。而在颗粒内部晶体中,基本没有氦气泡。鉴于氦在钛铁矿中的高溶解度,研究人员认为氦原子首先由太阳风注入钛铁矿晶格中,之后在晶格的沟道扩散效应下,氦会逐渐释放出来。而表层玻璃具有原子无序堆积结构,限制了氦原子的释放,被捕获并逐渐储存起来,形成了气泡。氦-3作为氦的一种同位素,在能源、科学研究等领域具有重要应用价值。100吨氦-3核聚变产生的能量即可供应全球使用1年,且氦-3核聚变过程无中子二次辐射危险,更加清洁和可控。另外,氦-3是获得极低温环境的关键制冷剂,是超导、量子计算、拓扑绝缘体等前沿研究领域的必需物质。然而,地球上氦元素主要是氦-4,氦-3储量只有0.5吨左右,远远无法满足现有需求。氦-3是太阳风的重要成分,月球由于常年受太阳风的辐照,储存了大量氦-3。但是为什么月球具有丰富的战略资源氦-3?氦-3在月球上是以什么形式储藏的?这些问题还没有明确的答案。探索月球资源,特别是氦-3的含量、分布和开采,已经</p></body></html>

结果如下:

当我点击第五章节时,跳转到了第五章节对应的地方

思考:要怎么回到第一章节呢?

这时只需要在最后加一个a标签,并且里面的herf属性与第一章关联起来就可以了。

所以只需要在内容最后写入如下:

<a href="#第一章">返回第一章</a>

点击 ‘’返回第一章‘’ 就跳转到最上面了

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。