本章节介绍介绍一下如何利用锚点实现定位，使用锚点实现定位是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. cetos 7 常用命令

    1. 安装 yum install 2. 可安装查找  yum search 3. 查找文件  whereis 4. 查看文件cat 5. 修改文件vi

  2. Cocos2d-JS中的cc.LabelAtlas

    cc.LabelAtlas是图片集标签,其中的Atlas本意是“地图集”.“图片集”,这种标签显示的文字是从一个图片集中取出的,因此使用cc.LabelAtlas需要额外加载图片集文件.cc.Labe ...

  3. Cocos2d-x移植到WindowsPhone8移植问题-libNetwork库移植问题

    Cocos2d-x提供了libNetwork库的源代码,而且还提供了libNetwork库的源代码Visual Studio 2012工程文件libNetwork.vcxproj,这样就更方便移植了. ...

  4. 10款基于jquery的web前端特效及源码下载

    1.jQuery时间轴插件:jQuery Timelinr 这是一款可用于展示历史和计划的时间轴插件,尤其比较适合一些网站展示发展历程.大事件等场景.该插件基于jQuery,可以滑动切换.水平和垂直滚 ...

  5. 卸载Linux内置的AMP软件

    卸载Linux内置的AMP软件 在安装Linux软件的LAMP环境时,必须有一个前提:必须要完全卸载掉系统内置的AMP软件. 1.卸载httpd软件(Apache) 如果在卸载软件时出现依赖关系,我们 ...

  6. 删除 mysql (rpm)

    http://blog.csdn.net/love__coder/article/details/6894566 a)查看系统中是否以rpm包安装的mysql [root@linux ~]# rpm  ...

  7. 两个Activity之间的交互startActivityForResult的使用

    代码如下: package com.zzw.teststartintentforrequest; import android.app.Activity; import android.content ...

  8. 婚庆手机APP

    这是一个信息化的时代,即将步入婚姻殿堂的新人们,你们是否希望有这样一款手机软件能伴随你从结婚到婚后一路的历程呢?比如说请帖通过手机客户端来将结婚的时间地点流程共享给您的亲朋好友,将您的婚纱照.随拍.写 ...

  9. 优化C++程序编译效率的一些方法

    优化是一件非常重要的事情.作为一个程序设计者,你肯定希望自己的程序既小又快.DOS时代的许多书中都提到,“某某编译器能够生成非常紧凑的代码”,换言之,编译器会为你把代码尽可能地缩减,如果你能够正确地使 ...

  10. WPF 实现QQ抖动

    //wpf中实现类似于qq的抖动窗效果 //前段页面 <Window x:Class="WpfApplication4.MainWindow" xmlns="htt ...