html利用锚点实现定位代码实例
本章节介绍介绍一下如何利用锚点实现定位，使用锚点实现定位是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利用锚点实现定位代码实例的更多相关文章
- jQuery实现锚点平滑定位
一般的锚点,就是点击一个按钮或者其他元素可以实现定位效果,当然可以使用锚点实现,但是这个不够美观,没有平滑的动画过渡效果,下面就通过代码实例介绍一下利用jquery实现平滑的定位效果. <!DO ...
- URL锚点HTML定位技术机制
一.锚点是什么 锚点就等同于火影中的“飞雷神之术”,我们先看百科中锚点的解释: 使用命名锚记可以在文档中设置标记,这些标记通常放在文档的特定主题处或顶部.然后可以创建到这些命名锚记的链接,这些链接可快 ...
- vue2.0模拟锚点实现定位平滑滚动
vue2.0模拟锚点实现定位平滑滚动 效果为点击哪一个标题,平滑滚动到具体的详情. 如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 anima ...
- URL锚点HTML定位技术机制、应用与问题
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3591 一.锚点是什么 ...
- Tiny6410之重定位代码到SRAM+4096
重定位代码 两个不同的地址概念: 对于程序而言,需要理解两个地址,一个是程序当前所处的地址,即程序运行时所处的当前地址.二是程序应该位于的运行地址,即编译程序时所指定的程序的链接地址.在Tiny641 ...
- !!!css如何让img图片居中？css的display属性实现图片居中（代码实例）
在我们开发前端页面的时候,为了让页面效果美观,会让图片呈现居中效果.那么css怎么让img图片居中显示呢?本篇文章给大家带来css如何让img图片居中?css的display属性实现图片居中(代码实例 ...
- EasyUI中combobox的使用方法和一个代码实例
一.easyUI中select下拉框动态添加option选项 问题:想在combobox的下拉项里动态添加一些内容,但是添加不成功.因为jquery easyui的下拉列表combobox是用DIV模 ...
- 【智能算法】粒子群算法（Particle Swarm Optimization）超详细解析+入门代码实例讲解
喜欢的话可以扫码关注我们的公众号哦,更多精彩尽在微信公众号[程序猿声] 01 算法起源 粒子群优化算法(PSO)是一种进化计算技术(evolutionary computation),1995 年由E ...
- php spl标准库简介（SPL是Standard PHP Library（PHP标准库）（直接看代码实例，特别方便）
php spl标准库简介(SPL是Standard PHP Library(PHP标准库)(直接看代码实例,特别方便) 一.总结 直接看代码实例,特别方便易懂 thinkphp控制器利眠宁不支持(说明 ...
随机推荐
- 英特尔实感SDK 代码示例
原文地址 摘要 本套代码示例针对巴西英特尔实感动手实验室创建,旨在帮助参与人员了解如何使用英特尔® 实感™ 软件开发套件. 12 个示例使用 C# SDK 包装程序,提供了简单的基于控制台的应用,支持 ...
- cocos2dx-lua之断点调试支持
cocos2dx 3.2版对cocos code ide支持已经相当棒了,不过话说,编辑器用起来感觉没有sublime顺手 支持cocos code ide已经支持创建lua项目了,可是默认创建的项目 ...
- 大数阶乘(c语言)
大数阶乘.代码比较简单. #include<stdio.h> #include<string.h> #define MAXN 25000 // 如果你的阶乘N比较大,建议大一点 ...
- python基础:day3作业
修改haproxy配置文件 基本功能:1.获取记录2.添加记录3.删除记录 代码结构:三个函数一个主函数 知识点:1.python简单数据结构的使用:列表.字典等 2.python两个模块的使用:os ...
- bzoj 1042 HAOI2008 硬币购物
这道题思路是在是神. 先dp出没有限制时候的方案数. dp的时候注意 先循环 1..4 再循环 1..maxs 防止重复.边界是f[0] = 1. 这么基础的背包都忘记了=_= 接下来处理有重复的问题 ...
- windows phone 手机截图
无聊在商城找了一款小游戏玩,看到一个截屏功能,就google了一下具体实现,还是比较简单的,主要是靠WriteableBitmap(提供一个可写入并可更新的 BitmapSource)类实现.看一下m ...
- EDK中如何使用ISE中生成的IP
EDK中如何使用ISE中生成的IP: 网上上有说这个的文章,但是很复杂,也就是添加bdd文件,其实这些都不需要自己操作的,我们可以在EDK中import 中添加ngc文件,ngc文件就是core ge ...
- ADO.NET笔记——执行事务
相关知识: 处于同一事务(Transaction)内的一组操作,要么都成功执行,最后完全提交:但如果只要有任何一个操作失败或者出问题,所有值钱执行的操作也都取消并恢复到初始状态(即回滚) SqlTra ...
- jquery的相对父元素和相对文档定位示例代码
在开发jquery时候经常需要用到定位,有相对父元素定位和相对文档定位,本文为此总结下,有需要的朋友可以参考下 在开发jquery时候经常需要用到定位,这里概括两种定位: 1.相对父元素定位: $(& ...
- 关于无限分类的树状输出(id,name,pid)类型的
首先创建无限分类的数据表,我这里采用的是id.name.pid这种类型(当然还有很多种无限分类的方式了,比如:id.name.pid.path.left.right左右节点的形式) CREATE TA ...