本章节介绍介绍一下如何利用锚点实现定位，使用锚点实现定位是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. ubuntu下安装git，sublime，nodejs

    用的是VMware10.0版本的虚拟机,很早之前下载的今天就直接用了,安装挺简单记得需要一个序列号.在这里:http://mirrors.163.com/ubuntu-releases/15.04/u ...

  2. 7款纯CSS3实现的炫酷动画应用

    1.纯CSS3实现人物摇头动画 这次我们要来分享一款超级可爱的纯CSS3人物摇头动画,初始化的时候人物的各个部位是利用CSS3动画效果拼接而成,接下来就是人物听音乐的场景,一边听音乐一边摇着脑袋,十分 ...

  3. CSS3伪类

    1.:last-child 比如:查找ul的最后一个li ul li:last-child { //样式 } 2.:first-child 比如:查找ul的第一个li ul li:first-chil ...

  4. Install GDAL in OpenSUSE 12.3 Linux

    Runtime Enviroment:Open SUSE Linux *i385 Notice:if any command disavliable ,you can copy the paramet ...

  5. go开发环境配置

  6. DailyWallpaper - V1.01 released

    桌面每日一图 最近发现美国国家地理网站上有个photo of the day很不错,地址在这里.http://photography.nationalgeographic.com/photograph ...

  7. 状态模式（State）

    状态模式,从字面意思上来讲应该是很简单的,就是针对实际业务上的内容,当类的内部的状态发生改变时,给出不同的响应体,就像现实中的人一样,早上没有吃饭,状态不好,上班.上课都会打哈欠,中午了,吃过午饭,又 ...

  8. 创建本地Ubuntu镜像

    参考文档 http://www.howtoforge.com/local_debian_ubuntu_mirror 安装服务 : sudo apt-get install apt-mirror apa ...

  9. HTML5+CSS3+JQuery打造自定义视频播放器

    来源:http://www.html5china.com/HTML5features/video/201109206_1994.html 简介HTML5的<video>标签已经被目前大多数 ...

  10. wap网站seo如何优化呢？

    从事互联网的人员都知道移动互联网营销是一个大的趋势,但是要怎么去做恐怕还都一筹莫展.由PC端的网络营销的经验和常识来看,首要的是要做好移动端手机网站的优化工作.据观察分析,目前国内的大多数并没有做好手 ...