HTML5已经去掉name属性，实现锚点时请使用id，实例效果：http://keleyi.com/keleyi/phtml/html5/9.htm

支持Chrome，火狐，IE8以上等浏览器。

以下是完整代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>HTML5锚点实例--柯乐义</title><base target="_blank" />

<style>

body{margin:0px;}

</style>

</head>

<body>

<div id="keleyihead"><a href="http://keleyi.com">柯乐义</a> <a href="http://keleyi.com/a/bjac/hwqa4oex.htm">HTML5锚点</a> keleyi.com<br /><script type="text/javascript" src="http://keleyi.com/kineryi/js/gggg728x90a.js"></script></div>

<div style="height:30px;width:100%;text-align:center"><a href="#keleyifoot" target="_self">转到底部</a></div>

<div style="background-color:#959822; width:100%;height:150px;">请滚动鼠标使页面向下</div>

<div style="background-color:Green; width:100%;height:150px;">www.keleyi.com</div>

<div style="background-color:Red; width:100%;height:150px;">欢迎</div>

<div style="background-color:Yellow; width:100%;height:150px;">hi</div>

<div style="background-color:Silver; width:100%;height:150px;"><br /><a href="http://keleyi.com/dev/94fb5964c80ee829.htm" target="_blank">绿色箭头图片返回顶部效果</a>

<br /><a href="http://keleyi.com/a/bjac/7cc2358ac924ebc5.htm" target="_blank">蓝色方块返回顶部</a>

<br /><a href="http://keleyi.com/a/bjac/6f008786225269ac.htm" target="_blank">纯文本返回顶部</a>

<br /><a href="http://keleyi.com/a/bjac/8aa32432160f9aa4.htm" target="_blank">漂亮的返回顶部、底部和留言</a></div>

<div style="background-color:Aqua; width:100%;height:150px;">keleyi.com</div>

<div style="background-color:Fuchsia; width:100%;height:150px;">keleyi</div>

<div style="background-color:Green; width:100%;height:150px;">keleyi.com</div>

<div style="background-color:Blue; width:100%;height:150px;">柯乐义</div>

<div style="background-color:Olive; width:100%;height:150px;">柯乐义 监视下滚像素</div>

<div style="background-color:Green; width:100%;height:150px;">ｋｅｌｅｙｉ.ｃｏｍ</div>

<div style="background-color:Purple; width:100%;height:150px;">jquery</div>

<div style="background-color:Green; width:100%;height:150px;"><a href="http://keleyi.com/a/bjac/f4a6f78d74a251c5.htm" target="_blank">原文</a></div>

<div style="background-color:Lime; width:100%;height:150px;">keleyi.com</div>

<div style="background-color:Orange; width:100%;height:150px;">完整代码</div>

<div style="height:200px;width:100%;">HTML5已经去掉name属性，实现锚点时请使用id</div>

<div id="keleyifoot" style="width:100%;height:276px;background: url(http://keleyi.com/images/footerimg.jpg); background-position:center top; background-repeat:no-repeat;text-align:center;"><a href="#keleyihead" target="_self">回到顶部</a></div>

</body>

</html>

直接转到页底示例：
http://keleyi.com/keleyi/phtml/html5/9.htm#keleyifoot

原文：http://keleyi.com/a/bjac/hwqa4oex.htm

HTML5锚点请用id代替name的更多相关文章

  1. Html5 锚 <a>的页内跳转, name=abc herf=#abc

    锚点是网页制作中超级链接的一种,又叫命名锚记.命名锚记像一个迅速定位器一样是一种页面内的超级链接,运用相当普遍. 英文名:anchor 使用命名锚记可以在文档中设置标记,这些标记通常放在文档的特定主题 ...

  2. HTML5中a标签的锚点使用

    前几天有个用户问我关于在线手册功能里的锚点问题.因为他通过代码发现,在编辑手册内容时,锚点的设置是通过id选择器来制定的,而不是带有name属性的a标签.其实这是HTML5和HTML4(XHTML)等 ...

  3. 使用 HTML5 设计辅助功能

    使用 HTML5 设计辅助功能 Rajesh Lal 下载代码示例 如果您真的对面向广大受众感兴趣,将需要为网站设计辅助功能. 辅助功能使网页更易于访问.更易于使用,可供每个人浏览. 通常,使用最新的 ...

  4. HTML5学习手册

    目录 HTML 简介 HTML 简介 什么是 HTML? HTML 标签 HTML 文档 = 网页 基本的 HTML 标签 - 四个实例 HTML 标题 HTML 段落 HTML 链接 HTML 图像 ...

  5. HTML5 程序设计 - 使用HTML5 Canvas API

    请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...

  6. js+html5双人五子棋(源码下载)

    代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  7. HTML5&CSS3练习笔记(二)

    HTML5&CSS3  练习CSS3伪选择器使用 1.first-line  格式:元素:first-line 说明:设置同一个标签下所有行内容的第一行的样式,例如: <table st ...

  8. html5新增及删除标签

    一.新增标签 有一种划分为,功能性标签[html5新增,如canvas,旧浏览器没有]和语义性标签[如header等只是增强语义,没有新功能].下面按照分几个小类来说. 1.结构标签 新增的结构标签, ...

  9. HTML5学习总结-05 HTML5表单

    一 HTML5 新的类型 HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证. email url number range Date pickers (date, month ...

随机推荐

  1. 深入理解javascript函数系列第三篇——属性和方法

    × 目录 [1]属性 [2]方法 前面的话 函数是javascript中的特殊的对象,可以拥有属性和方法,就像普通的对象拥有属性和方法一样.甚至可以用Function()构造函数来创建新的函数对象.本 ...

  2. Bootstrap3.0学习第十轮(下拉菜单、按钮组、按钮式下拉菜单)

    详情请查看http://aehyok.com/Blog/Detail/16.html 个人网站地址:aehyok.com QQ 技术群号:206058845,验证码为:aehyok 本文文章链接:ht ...

  3. UML简介

    Unified Modeling Language (UML)又称统一建模语言或标准建模语言,是始于1997年一个OMG标准,它是一个支持模型化和软件系统开发的图形化语言,为软件开发的所有阶段提供模型 ...

  4. 响应式网页中，如何只用CSS实现div的高和宽保持固定比例

    引言: 如果div里是<img>,原生就支持. .item img {     float: left;     margin:5%;     width: 20%; } >> ...

  5. Java性能优化

    作者:禅楼望月(http://www.cnblogs.com/yaoyinglong) 注:里面的测试结果会因电脑配置的不同而有所差异!!! 1. 为一些集合定义初始化大小 List.Set.Map都 ...

  6. 补充$.extend()

    这里多谢某童鞋的提醒!说我的上篇随笔jquery插件开发的方式一还还可用于合并参数和深clone,虽然方式二中用了方式一做参数合并,但并未详细介绍,所以今天在此处做点补充! 一.合并参数 jquery ...

  7. T-SQL中的一些小陷阱

    1,当心ISNULL函数对你的逻辑引起BUG 有人喜欢或者习惯于(并不代表我推荐,甚至这种写法没有任何好处)用ISNULL处理变量这种方式写查询 比如:select * from TestISNULL ...

  8. IE条件注释详解

    IE条件注释是微软从IE5开始就提供的一种非标准逻辑语句,作用是可以灵活的为不同IE版本浏览器导入不同html元素,如:样式表,html标签等.很显然这种方法的最大好处就在于属于微软官方给出的兼容解决 ...

  9. HT for Web整合OpenLayers实现GIS地图应用

    HT for Web作为逻辑拓扑图形组件自身没有GIS功能,但可以与各种GIS引擎即其客户端组件进行融合,各取所长实现逻辑拓扑和物理拓扑的无缝融合,本章将具体介绍HT for Web与开发免费的Ope ...

  10. Moon.Orm3.8技术全攻略

    Moon.ORM技术全攻略  一.绪论 本文主要是针对Moon.ORM的技术的讨论及其使用使用指导.如有其它疑问,请留言.本文主要针对Moon.ORM3.9版本,同时将会对4.0做一个技术预览.本文从 ...