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. duilib 入坑

    记录 duilib 开发遇到的问题 当前最新的 duilib 版本更新是在  2019-4-28-2,从 vcpkg 查询得知 我的机器是 windows 10,vs2019 我是从 duilib 库 ...

  2. 程序员应具备的PS基本技能（三）：程序员使用PSD源文件切图

    若该文为原创文章,未经允许不得转载原博主博客地址:https://blog.csdn.net/qq21497936原博主博客导航:https://blog.csdn.net/qq21497936/ar ...

  3. render_to_string快捷函数，渲染模板字符串

    # views.py from django.template.loader import render_to_string from django.http import HttpResponse ...

  4. 我的第一个项目(九) :飞机大战Vue版本塞到主页

    好家伙, 这是未进行分包的vue版本的飞机大战 效果如下:   这里说明一下,大概使用逻辑是提供一个<div> 然后在这<div>中渲染游戏 游戏主界面代码如下: 1 < ...

  5. 第122篇: JS函数一些基本概念

    好家伙,本篇为<JS高级程序设计>第十章"函数"学习笔记 1.函数的三种定义方式:函数表达式.函数声明及箭头函数 函数声明: function sum(a) { ret ...

  6. 【Azure 应用服务】如何让App Service 支持 Delete 方法 

    问题描述 如何让webapp 支持 delete 方法? 在不修改设置的情况下,调用DELETE方法出现405错误 - 方法不被允许 问题解决 基于当前App Service在Windows的环境中运 ...

  7. gorm整理

    目录 1. 约定 2. 结构体标签 3. 创建记录 4. 更新 5.删除 6. 查询 7.关联 8.链式操作 9.范围 10.多个立即执行方法的注意事项 11.错误处理 12.钩子 13.事务 14. ...

  8. （二）Git 学习之基础篇

    一.理论基础 1.1 Git 记录的是什么? Git 和其它版本控制系统(如 SVN)的主要差别在于 Git 对待数据的方式. 1.1.1 SVN 记录差异比较 从概念上来说,SVN 以文件变更列表的 ...

  9. 复习精简版快速学vue3

    vue2中.如果给一个之前没有定义的属性赋值,会得不到时实更新: this.obj.b=2 //由于这个属性之前没有定义,是不支持动态响应,只能用this.$(this.obj,'b',2)也就是说v ...

  10. Zabbix6.0使用教程 (二)—zabbix6.0常用术语

    上一次我们已经详细介绍了zabbix6.0的新增功能,本篇我们来说说zabbix6.0常用的一些术语,这个对小伙伴日常使用zabbix的时候还是非常有用,建议大家收藏起来,话不多说,附上干货. 概览 ...