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控制器利眠宁不支持(说明 ...
随机推荐
- Excel VBA 快捷键 代码
一. 在ThisWorkbook中 Private Sub Workbook_Open() '%对应alt键 宏不能加() Application.OnKey "%q", &quo ...
- VxWorks 6.9 内核编程指导之读书笔记 -- 多任务
概述 VxWork系统任务 任务调度 任务创建和管理 任务的错误状态 任务异常处理 共享代码和重入 概述 现代实时操作系统是基于多任务和任务间通信的概念的.多任务环境运行一个实时进程RTP可以被作为一 ...
- 理解C#系列 / 核心C# / 判断&循环&跳转
判断&循环&跳转 说明 本节写的是C#语言的控制程序流的语句,“控制程序流”就是控制程序运行流程的意思. 判断 很容易理解:如果……就…… if语句:测试特定条件是否满足,如果满足就执 ...
- JS 提示框 alert()、confirm()、prompt()的三者的区别
使用消息框 使用警告.提示和确认 可以使用警告.确认和提示消息框来获得用户的输入.这些消息框是 window 对象的接口方法.由于 window 对象位于对象层次的顶层,因此实际应用中不必使用这些消息 ...
- JCrop+ajaxUpload 图像切割上传
先看效果 需要的文件下载 链接:http://pan.baidu.com/s/1b8SI6M 密码:59ct 页面代码 里面用户的uuid是写死的test <%@ page language=& ...
- MySQL 5.7 Zip 安装（win7）
参考官方文档 http://dev.mysql.com/doc/refman/5.7/en/windows-install-archive.html 2.3.5.1 Extracting the In ...
- centos安装环境准备工作
我们的centos系统安装好了,并且网络已经连通了,接下来介绍一下,在外网连通的情况下,我们如何安装tar.gz等形式的软件. centos安装后如果想作为正常应用development tools和 ...
- Amazon Kinesis Producer Library 使用记录
Amazon Kinesis 是一种托管的服务,用于有弹性与扩展性的实时处理大规模的流数据.该服务收集大数据记录流,多个可在 Amazon EC2 实例上运行的数据处理应用程序随后可实时使用此流. 在 ...
- [react native] Error loading page
如上图显示的错误,解决方法如下: 在react native ios项目的info.plist文件中,新增一个属性. 在Info.plist中添加NSAppTransportSecurity类型Dic ...
- lnmp下用phpize动态安装PHP模块/扩展(不需要重装PHP)
安装前 安装前建议先执行 /usr/local/php/bin/php -m (此命令显示目前已经安装好的PHP模块)看一下,要安装的模块是否已安装.然后下载当前PHP版本的源码并解压. 本文以ima ...