本章节介绍介绍一下如何利用锚点实现定位，使用锚点实现定位是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. SQL IDENTITY(int,1,1) 用法

    select IDENTITY(int,1,1) as SortID from tb_order 仅当 SELECT 语句中有 INTO 子句时,才能使用 IDENTITY 函数. select ID ...

  2. phpmailer使用163邮件发送邮件例子

    注意:如果你的服务器安装了卖咖啡并且开户病毒最大防护功能我们需要关闭一个邮件防护哦,否则你的邮件发不出去给被这款杀毒给拦截哦. 1. 使用gmail发送的脚本 代码如下 复制代码 include(&q ...

  3. 数据挖掘：Weka代码学习

    在Eclipse中配置Weka,在Eclipse中新建一个Java Project,然后在Eclipse的Resource目录中,在新new的Project上右键选择Build Path中选择add ...

  4. tar 「解/壓」 包

    1.tar: short read tar壓縮包文件發生了損壞,或者说不完整. 最近,在寫下載程序的時候,發生了這個問題.初步猜測文件寫完沒有關閉,沒有寫完.

  5. ant条件逻辑

    <condition property="sdk-folder" value="E:\android\android-sdk\adt-bundle-windows- ...

  6. silverlight将字符串转化为控件

    silverlight的System.Windows.Markup命名空间下,提供了XamlReader.Load()方法可以将字符串转换为控件. 代码 StringBuilder sbGrid = ...

  7. Template、ItemsPanel、ItemContainerStyle、ItemTemplate

    先来看一张图(网上下的图,加了几个字) 1.Template是指控件的样式 在WPF中所有继承自contentcontrol类的控件都含有此属性,(继承自FrameworkElementdl类的Tex ...

  8. Apache 2.4 多站点配置记录

    基于域名的虚拟主机配置 <VirtualHost *:80> DocumentRoot /var/www/cms ServerName www.example.com RewriteEng ...

  9. PHP操作MongoDB简明教程(转)

    转自:http://blog.sina.com.cn/s/blog_6324c2380100ux2m.html MongoDB是最近比较流行的NoSQL数据库,网络上关于PHP操作MongoDB的资料 ...

  10. mysql在windows下支持表名大小写，lower_case_table_names

    windows下mysql默认是不支表名大小写的,也就是表名大小写不敏感.用phpmyadmin创建的驼峰式表名,全部被强制成小写.mysql表名大小写敏感的参数: lower_case_table_ ...