我们都知道<a>标签中的url属性有三种值：

  • 绝对 URL - 指向另一个站点（比如 href="http://www.example.com/index.htm"）
  • 相对 URL - 指向站点内的某个文件（href="index.htm"）
  • 锚 URL - 指向页面中的锚（href="#top"）

对于第三种锚点的经典用法：纯css切换

其实质就是将滚动条中的指定内容跳转到当前显示位置。

注：文章参考：http://www.zhangxinxu.com/wordpress/2013/08/url-anchor-html-%E9%94%9A%E7%82%B9%E5%AE%9A%E4%BD%8D%E6%9C%BA%E5%88%B6-%E5%BA%94%E7%94%A8-%E9%97%AE%E9%A2%98/

URL锚点定位的更多相关文章

  1. URL锚点HTML定位技术机制

    一.锚点是什么 锚点就等同于火影中的“飞雷神之术”,我们先看百科中锚点的解释: 使用命名锚记可以在文档中设置标记,这些标记通常放在文档的特定主题处或顶部.然后可以创建到这些命名锚记的链接,这些链接可快 ...

  2. URL锚点HTML定位技术机制、应用与问题

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3591 一.锚点是什么 ...

  3. 锚点定位且不改变url地址

    锚点定位且不改变url html 事件触发<li v-for="(item,index) in couponsList.swaps" :key="index&quo ...

  4. 使用锚点定位不改变url同时平滑的滑动到锚点位置，不会生硬的直接到锚点位置

    使用锚点定位不改变url同时平滑的滑动到锚点位置,不会生硬的直接到锚点位置 对前端来说锚点是一个很好用的技术,它能快速定位到预先埋好的位置. 但是美中不足的是它会改变请求地址url,当用户使用了锚点的 ...

  5. html中设置锚点定位的几种常见方法（#号定位）

    在html中设置锚点定位我知道的有几种方法,在此和大家分享一下: 1.使用id定位: <a href="#1F">锚点1</a> <div id=&q ...

  6. 【TRICK】解决锚点定位向下浮动Xpx问题

    1. 问题描述 页面滚动后,菜单栏会固定在页头,当锚点定位时,菜单会遮盖部分定位后的内容,所以需要在锚点定位后自动向下漂移Xpx. 2. 解决办法 a. 利用空div 占位,如下: <a hre ...

  7. 当锚点定位遇上position: fixed

    <!DOCTYPE html><html> <head> <title>当锚点定位遇上position: fixed</title> < ...

  8. Android tabLayout+recyclerView实现锚点定位

    原文链接:https://mp.weixin.qq.com/s/L3o2i3WTmg1ScXEYDS8YCg 在上一篇文章 Android 实现锚点定位中,我们介绍了tablayout+scrollV ...

  9. Android 实现锚点定位

    相信做前端的都做过页面锚点定位的功能,通过<a href="#head"> 去设置页面内锚点定位跳转. 本篇文章就使用tablayout.scrollview来实现an ...

随机推荐

  1. git命令收集整理

    git init # 初始化本地git仓库(创建新仓库) git config --global user.name "xxx" # 配置用户名 git config --glob ...

  2. javax.net.ssl.SSLException: java.lang.UnsupportedOperationException

    Loading KeyStore C:\Tool\jdk1.7.0_71\jre\lib\security\jssecacerts... Opening connection to www.googl ...

  3. css 三角实例

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. iOS中3种正则表达式的使用与比较－备

    1.利用NSPredicate(谓词)匹配 例如匹配有效邮箱: ? 1 2 3 4 NSString *email ＝ @“nijino_saki@163.com”:  NSString *regex ...

  5. Discuz！提取文章标签

    <?php    //强制使用字符集 @header('Content-Type: text/html; charset=gbk');    $subjectenc ='title'; //这是 ...

  6. (转)Autotrace工具使用——小工具，大用场

    监控SQL语句,获取执行计划和执行成本,是每个Oracle开发人员与DBA所必须具备的能力之一. 当Oracle彻底进入CBO时代,我们面对一种全新的局面.一方面,基于数据统计量的CBO优化器,让SQ ...

  7. Oracle 中包的应用

    包由两个分离的部分组成:包头(PACKAGE)和包体(PACKAGEBODY).包头是包的说明部分,是对外的操作接口,对应用是可见的;包体是包的代码和实现部分,对应用来说是不可见的黑盒.        ...

  8. linux下制作共享库.a和 .so

    接触linux时间不长,总是感觉底气不足,很多东西总是感到迷迷糊糊,其实是因为没找拿到linux C的两把钥匙: makefile和动态库.共享库.linux C中几乎所有的程序都是以库的形式给出,如 ...

  9. 转:sql语句中GROUP BY 和 HAVING和使用 count()

    在开发时,我们经常会遇到以“累计(count)”或是“累加(sum)”为条件的查询.比如user_num表: id user num 1 a 3 2 a 4 3 b 5 4 b 7   例1:查询出现 ...

  10. ssh添加公钥

    ssh-keygen生成公钥存储在文件: ~/.ssh/id_rsa.pub 如果ssh-add -l命令后没有一串长的字符串, 把私钥密钥对的ID(fingerPrint)加入ssh的认证代理ssh ...