本章节介绍介绍一下如何利用锚点实现定位，使用锚点实现定位是html固有的功能，当然比较简单，也实现了基本的功能，但是功能相对简单一些，如果想要实现平滑的定位可以参阅jquery实现的点击页面动画方式平滑定位到某元素代码一章节。 下面通过代码实例介绍一下html是如何实现锚点定位的。

代码如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>http://www.100sucai.com</title>

<style type="text/css">

.a{

  width:60px;

  height:20px;

  background:#F90;

  font-size:12px;

  text-align:center;

  line-height:20px;

  position:fixed;

  right:0px;

  top:50px;

  cursor:pointer;

  display:block;

  text-decoration:none;

}

#thediv{

  width:100%;

  height:50px;

  background:#CCC;

  margin-top:100px;

}

</style>

</head>

<body style="height:1000px;">

<a class="a" href="#thediv">点击定位</a>

<div id="thediv">

<li><a href="http://www.100sucai.com/web/jquerytexiao/daohangcaidan/" title="导航菜单">导航菜单</a></li>

<li><a href="http://www.100sucai.com/web/jquerytexiao/xuanxiangka/" title="table选项卡">table选项卡</a></li>

</div>

</body>

</html>

以上代码实现了锚点定位效果，代码非常的简单，将链接a的href属性值设置为要定位元素的id属性值，但是前面要加#。

html利用锚点实现定位代码实例的更多相关文章

  1. jQuery实现锚点平滑定位

    一般的锚点,就是点击一个按钮或者其他元素可以实现定位效果,当然可以使用锚点实现,但是这个不够美观,没有平滑的动画过渡效果,下面就通过代码实例介绍一下利用jquery实现平滑的定位效果. <!DO ...

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

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

  3. vue2.0模拟锚点实现定位平滑滚动

    vue2.0模拟锚点实现定位平滑滚动 效果为点击哪一个标题,平滑滚动到具体的详情. 如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 anima ...

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

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

  5. Tiny6410之重定位代码到SRAM+4096

    重定位代码 两个不同的地址概念: 对于程序而言,需要理解两个地址,一个是程序当前所处的地址,即程序运行时所处的当前地址.二是程序应该位于的运行地址,即编译程序时所指定的程序的链接地址.在Tiny641 ...

  6. !!!css如何让img图片居中？css的display属性实现图片居中（代码实例）

    在我们开发前端页面的时候,为了让页面效果美观,会让图片呈现居中效果.那么css怎么让img图片居中显示呢?本篇文章给大家带来css如何让img图片居中?css的display属性实现图片居中(代码实例 ...

  7. EasyUI中combobox的使用方法和一个代码实例

    一.easyUI中select下拉框动态添加option选项 问题:想在combobox的下拉项里动态添加一些内容,但是添加不成功.因为jquery easyui的下拉列表combobox是用DIV模 ...

  8. 【智能算法】粒子群算法（Particle Swarm Optimization）超详细解析+入门代码实例讲解

    喜欢的话可以扫码关注我们的公众号哦,更多精彩尽在微信公众号[程序猿声] 01 算法起源 粒子群优化算法(PSO)是一种进化计算技术(evolutionary computation),1995 年由E ...

  9. php spl标准库简介（SPL是Standard PHP Library（PHP标准库）（直接看代码实例，特别方便）

    php spl标准库简介(SPL是Standard PHP Library(PHP标准库)(直接看代码实例,特别方便) 一.总结 直接看代码实例,特别方便易懂 thinkphp控制器利眠宁不支持(说明 ...

随机推荐

  1. Linux密码更改

    男孩儿的灰色 QQ:936779899 2014.2.9 1. 进入单用户模式 2. 编辑passwd文件,删除X 3. 然后保存推出并编辑shadow文件 4. 删除标色部分,其他保持不变 5. 最 ...

  2. spark写入Oracle 报错 java.lang.ArrayIndexOutOfBoundsException: -32423

    原因: oracle 10g的驱动执行的批量提交只支持32768个参数,如果表的字段多于32个,就会出现该异常 解决办法: 升级oracle的驱动版本,换成ojdbc6.jar

  3. 实例介绍Cocos2d-x开关菜单

    开关菜单是MenuItemToggle类实现的,它是一种可以进行两种状态切换的菜单.它可以通过下面的函数创建: static MenuItemToggle*createWithCallback  ( ...

  4. 【学习笔记】【C语言】位运算

    1. & 按位与 1> 功能 只有对应的两个二进位均为1时,结果位才为1,否则为0. 2> 举例: 比如9&5,其实就是1001&101=1,因此9&5=1 ...

  5. 用实体框架搭建MVC程序框架（全部）

    第一步:1.新建项目 2.新建domain类库 3.新建Data类库 4.为上面的1.2.3添加实体框架nuget包.(可以右键管理nuget包来查找entityframework,当然也可以通过程序 ...

  6. 20150301—ASP.NET的Repeater

    Repeater与GridView等数据列表一样,都是用来显示数据库的信息的,其中Repeater是最基本的列表形式,其用法也比较灵活. 一.Repeater的位置: 工具箱-数据-Repeater ...

  7. AMQ学习笔记 - 16. 确认机制的测试

    概述 对Acknowledge机制进行测试. 此处的测试是针对Consumer的确认设计的:对于Producer的确认是透明的,无法提供测试. 测试实例 设计demo,测试三种确认机制. 测试机制 测 ...

  8. ES6新增Promise

    1.promise概念 ES6 原生提供了 Promise 对象. 所谓 Promise,就是一个对象,用来传递异步操作的消息.它代表了某个未来才会知道结果的事件(通常是一个异步操作),并且这个事件提 ...

  9. 【风马一族_Java】如何使用ACSLL表的值，

    ------------------------------------------------------------------------------ 一,依次ACSLL表的值 将自然数赋值给c ...

  10. WIN2003跳出res://C:WINDOWSsystem32mys.dll/mys.hta解决方法

    出现这个问题的时候 @echo off 请将以下语句复制到记事本中,另存为后缀为.cmd的文件,并运行.当然在命令行下一句句运行也没问题. echo 正在修复,这个过程可能需要几分钟,请稍候…… ru ...