我们都知道<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. python保留指定文件、删除目录其他文件的功能(1)

    由于给客户的发布版本上客户改动了些代码和图片,我们这边给他们更新publish都是增量更新(开发提供更新指定的文件,我们提取出来给客户进行覆盖更新),但有时需要更新的文件较多导致不得不一个一个的进行查 ...

  2. nodeclub 学习记录

    源码地址:https://github.com/cnodejs/nodeclub 按照 它的步骤 在系统中跑没有出错,但是注册后没有发送邮件验证码,我将 controller层下面的sign.js 的 ...

  3. ubuntu vim YCM

    http://blog.sina.com.cn/s/blog_499386b00100rxm1.html http://www.cnblogs.com/junnyfeng/p/3633697.html

  4. cf A. Jeff and Digits

    http://codeforces.com/contest/352/problem/A #include <cstdio> #include <cstring> #includ ...

  5. 蓝牙芯片NRF51822入门学习1：时间管理

    前言 之前辞职找工作的时候发现,很多公司希望招聘蓝牙技术方面的人才,所以干脆丢开LWIP静下心来学习蓝牙技术.原本以为一两星期能基本学会的,谁知道所选的蓝牙芯片nrf51822是个坑货,坑了我一个月. ...

  6. 《Programming WPF》翻译 第7章 5.可视化层编程

    原文:<Programming WPF>翻译 第7章 5.可视化层编程 形状元素能提供一种便利的方式与图形一起工作,在一些情形中,添加表示绘图的元素到UI树中,可能是比它的价值更加麻烦.你 ...

  7. java 实现排序

    package com.cjs.sort; /** * 此类用来提供针对整数的各种排序算法 * * @author S * @version 1.0 */ public class MySort { ...

  8. linux下添加中文输入法

    一.安装环境 查看linux版本号 [ztteng@ztteng ~]$ lsb_release -aLSB Version:    :core-4.0-ia32:core-4.0-noarch:gr ...

  9. POJ 1742 Coins（多重背包） DP

    参考:http://www.hankcs.com/program/cpp/poj-1742-coins.html 题意:给你n种面值的硬币,面值为a1...an,数量分别为c1...cn,求问,在这些 ...

  10. FFmpeg缩放swscale详解 <转>

    利用ffmpeg进行图像数据格式的转换以及图片的缩放应用中,主要用到了swscale.h文件中的三个函数,分别是: struct SwsContext *sws_getContext(int srcW ...