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. KlayGE 4.4中渲染的改进（三）：高质量无限地形

    转载请注明出处为KlayGE游戏引擎,本文的永久链接为http://www.klayge.org/?p=2761   本系列的上一篇讲了DR中的一些改进.本篇开始将描述这个版本加入的新功能,高质量地形 ...

  2. SOLID原则

    SOLID是面向对象设计和编程(OOD&OOP)中几个重要编码原则 即:SRP单一责任原则: OCP开放封闭原则: LSP里氏替换原则: ISP接口分离原则: DIP依赖倒置原则. 1. 单一 ...

  3. JAVA EE Hibernate基础一之环境配置

    对于JAVA开发高级,hibernate是java三大框架之一,足以见得它的重要性,那么对于hibernate的使用大家有了解多少呢?从今天开始我将带领大家一道共同探讨一下hibernate的知识,h ...

  4. php基础教程-数据类型

    PHP 支持八种原始类型(type). 四种标量类型: string(字符串) integer(整型) float(浮点型,也作 double ) boolean(布尔型) 两种复合类型: array ...

  5. CSS 魔法系列：纯 CSS 绘制基本图形（圆、椭圆等）

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  6. 原生js写的贪吃蛇网页版游戏特效

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...

  7. Windows Azure Cloud Service (43) 使用Azure In-Role Cache缓存(2)Dedicated Role

    <Windows Azure Platform 系列文章目录> Update 2016-01-12 https://azure.microsoft.com/zh-cn/documentat ...

  8. 第17/24周 悲观并发控制（Pessimistic Concurrency）

    大家好,欢迎回到性能调优培训.今天标志着第5个月培训的开始,这个月我们会谈论SQL Server里的锁.阻塞和死锁(Locking, Blocking, and Deadlocking). SQL S ...

  9. Win10怎么输入法切换

    按 windows 键+空格键,或者CTRL+Shift,或者只按 Shift,或者CTRL+空格 试试 方法/步骤1在桌面上点击[控制面板],进入控制面板后使用分类显示控制面板内的选项.然后在语言下 ...

  10. 关于 Servlet 和 Web

       文中也只是对Servlet和Web作简单的了解,有个初步的认识,深入的内容有待于进一步去研究. T. T _ . _ Servlet     Servlet(Server Applet),全称J ...