7 锚点应用

锚点( anchor )是超链接的一种应用，也叫命名锚记，锚点可以像一个定位器一样，可以实现页面内的链接跳转，运用相当普遍。例如，我们有一个网页，由于内容太多，导致页面很长，而且里面的内容，可以分为N个部分。这样的话，我们就可以在网页的顶部设置一些锚点，这样便可以方便浏览者点击相应的锚点，到达本页内相应的位置，而不必在一个很长的网页里自行寻找。又例如，我们页面中，有个链接需要跳转到另一个页面的中间或者脚部去，这时候也可以运用上锚点技术来解决这个问题。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>锚点应用</title>

    <style>

        div{

            height: 800px;

            background-color: gray;

        }

    </style>

</head>

<body>

<a href="#c1">第一章</a>

<a href="#c2">第二章</a>

<a href="#c3">第三章</a>

<span id="top"></span>

<div id="c1">第一章内容<a href="#top">返回顶部</a></div>

<div id="c2">第二章内容<a href="#top">返回顶部</a></div>

<div id="c3">第三章内容<a href="#top">返回顶部</a></div>

</body>

</html>

7 HTML锚点应用的更多相关文章

  1. 原生js模拟锚点，实现点击后，内容定位到本页的对应位置

    今天在做angularJS项目过程中,遇见了一个需求,在一个页面中有多个表格,每个表格都有对应的分页,点击顶部对应的模块,可以定位到每个表格模块具体的位置. 页面如下所示: 在angular中,为了使 ...

  2. 了解HTML锚点

    概念 <a>元素 (或HTML锚元素, Anchor Element)通常用来表示一个锚点/链接.但严格来说,<a>元素不是一个链接,而是超文本锚点,可以链接到一个新文件.用i ...

  3. angularjs 锚点操作服务 $anchorScroll

    在普通的html网页中,我们可以通过在url后边添加  #elementid 的方式,将页面显示定位到某个元素,也就是锚点. 但是在angularjs应用的网页中,页面路由的写法是 #route/ro ...

  4. js做通讯录的索引滑动显示效果和滑动显示锚点效果

    只做实现..完全没考虑性能优化.所以我实现了以后特别卡. 第一个是在通讯录右边的索引条上进行滑动,滑动到相应字母就跳转到相应字母的锚点上. 思路:监听touchmove事件,获取clientX和cli ...

  5. jQuery实现页面内锚点平滑跳转

    平时我们做导航滚动到内容都是通过锚点来做,刷的一下就直接跳到内容了,没有一丝的滚动效果,而且 url 链接最后会有“小尾巴”,就像#keleyi,今天我就介绍一款 jquery 做的滚动的特效,既可以 ...

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

    24. 解决链接锚点的生硬问题 $('.nav .btn[href*=#],.icon2,.icon3').click(function() { if (location.pathname.repla ...

  7. a 锚点跳转滑动效果

    点击a链接时,跳转到相应id的位置处,有一个滑动效果. <a href="#my">我是跳转到div</a><div id="my" ...

  8. HTML meta锚点跳转 小tips

    小tips meta锚点跳转 http://www.zhangxinxu.com/wordpress/2015/03/meta-http-equiv-refresh-content/

  9. Html锚点定位偏差计算解决插件

    /*=============== 以下为HTML中的锚点代码 =====================*/ <div id="fixedNavBar" class=&qu ...

  10. 讨论SEO中是锚文本有效，还是纯文本有效呢？

    现在很多SEO好友不断在讨论,在SEO优化中,到底是锚文本有效,还是纯文本有效呢? 在这里给大家举一下列子:如“张家口人才网”这样的就叫做锚文本,意思是在原有的文本中加上超级链接,指向到优化的网页上面 ...

随机推荐

  1. C++ 多线程的错误和如何避免（7）

    要以相同顺序获取多个锁 多线程在加锁解锁时,可能会出现死锁问题,比如, 线程 1 在加锁 mutex A 后,继续尝试获取 mutex B,而 mutex B 已经被线程 2 获取,而线程 2 在等待 ...

  2. win32 - Screen to bmp file(BYTE)

    void WINAPI CaptureScreenIntoFile() { BITMAPFILEHEADER bfHeader; BITMAPINFOHEADER biHeader; HGDIOBJ ...

  3. 【Azure Redis 缓存】Azure Redis Cluster 在增加分片数时失败分析

    问题描述 Azure Redis Cluster 在增加分片数时失败,错误消息为: ResponseBody: { "error": { "details": ...

  4. 【Azure 应用服务】由Web App“无法连接数据库”而逐步分析到解析内网地址的办法(SQL和Redis开启private endpoint，只能通过内网访问，无法从公网访问的情况下）

    问题描述 在Azure上创建的数据库,单独通过SQL的连接工具是可以访问,但在Web App却无法访问,错误信息为: { "timestamp": "2021-05-20 ...

  5. 【Azure 事件中心】开启 Apache Flink 制造者 Producer 示例代码中的日志输出 （连接 Azure Event Hub Kafka 终结点）

    问题描述 Azure Event Hub 在标准版以上就默认启用的Kafka终结点,所以可以通过Apache Kafka协议连接到Event Hub进行消息的生产和消费.通过示例代码下载到本地运行后, ...

  6. Java 封装性的四种权限测试 + 总结

    *    总结封装性:Java提供了4中权限修饰符来修饰类及类的内部结构,体现类及类的内部结构再被调用时的可见性的大小 1 package com.bytezero.circle; 2 3 publi ...

  7. 学习笔记：勒让德（Legendre）符号

    授课老师:ybx.chh. 授课时间:2024/3/8. 授课内容纲要:勒让德符号及其性质(欧拉准则,高斯引理,二次互反律). 勒让德符号概括 好像在 OI 和 MO 当中都挺有用的. 勒让德符号的定 ...

  8. MYSQL索引-下

    前言 丁奇老师的 MYSQL45讲 的关于索引的的两节 深入浅出索引,做个笔记 覆盖索引 插入一个实例表 mysql> create table T ( ID int primary key, ...

  9. 基于STM32F407MAC与DP83848实现以太网通讯一（STM32以太网（ETH）外设）

    STM32F4xx 可以通过以太网按照 IEEE 802.3-2002 标准发送和接收数据.支持与外部物理层 (PHY) 相连的两个工业标准接口:默认情况下使用的介质独立接口 (MII)(在 IEEE ...

  10. Obsidian 设置快捷键 Ctrl+Shift+J 打开OB（未启动则启动，启动未激活则激活，已激活则最小化）- autoHotKey

    Obsidian 设置快捷键 Ctrl+Shift+J 打开OB(未启动则启动,启动未激活则激活,已激活则最小化)- autoHotKey 需求 将Obsidian作为主笔记软件使用,设置个快捷键,配 ...