本章节介绍介绍一下如何利用锚点实现定位，使用锚点实现定位是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. WCF之事务

    2阶段提交协议. 事务先提交给协调者,由协调者分发给各个RM,在一段规定的时间后.由RM询问各个RM是否提交还是终止操作.RM根据自己的状态来决定提交/终止.协调者根据RM的结果,决定操作的提交/终止 ...

  2. c语言 char*类型作为中间变量将许多字符串保存到一个数组的问题

    char*是一个字符串指针,如下面的程序value_作为一个中间变量用来在for循环中scanf输入的值的接收者,然后将value_保存到array中,但是一下程序会出现一个问题就是当你跳出这个函数时 ...

  3. Linux 伙伴算法简介

        本文将简要介绍一下Linux内核中的伙伴分配算法. Technorati 标签: 伙伴算法     算法作用      它要解决的问题是频繁地请求和释放不同大小的一组连续页框,必然导致在已分配 ...

  4. Base64加密

    实际开发中可能需要使用到可解密的加密方式,例如客户端记住用户的密码,客户端不能记住明文密码,那就需要对明文密码进行加密,然后在表单提交之后先对密码进行解密,在进行MD5加密和数据库中的密码进行比较实现 ...

  5. centos6.5安装flume

    这里安装flume是因为游戏业务日志搜集和分析用的 1.安装java 环境rpm -ivh jdk-8u51-linux-x64.rpm Preparing... ################## ...

  6. u-boot ctr0.S详解 包含_main函数

    /** ****************************************************************************** * @author    Maox ...

  7. 转：12种JavaScript MVC框架之比较

    Gordon L. Hempton是西雅图的一位黑客和设计师,他花费了几个月的时间研究和比较了12种流行的JavaScript MVC框架,并在博客中总结了每种框架的优缺点,最终的结果是,Ember. ...

  8. 京东sdk商家上架接口调用问题总结(更新中...)

    前言: 最近在做商家发布产品,调用京东sdk,发现问题很多,而且还是在我同事的帮助下完成的,摸索中,菜鸟还请高手门多多提携才好,入正题 首先是引用jd的sdk啦,京东sdk中发布商品需要调用一个 36 ...

  9. linux命令详解之useradd命令

    useradd命令使用方法,还包括用户账号的添加.删除与修改.用户口令的管理.用户组的管理方法. Linux系统是一个多用户多任务的分时操作系统,任何一个要使用系统资源的用户,都必须首先向系统管理员申 ...

  10. linux安装IPython四种方法

    IPython是Python的交互式Shell,提供了代码自动补完,自动缩进,高亮显示,执行Shell命令等非常有用的特性.特别是它的代码补完功能,例如:在输入zlib.之后按下Tab键,IPytho ...