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. gulp的使用

    一.简介 gulp是一款前端构建工具,是和grunt很类似的一款构建工具,但是相比grunt来说,gulp更轻量级,配置和使用更简单,命令更少,更容易学习和记住. 二.具体的使用 安装gulp: np ...

  2. Java面试题技术类一

    1.面向对象编程的三大特性是什么? (1).继承: 继承是一种联结类的层次模型,并且允许和鼓励类的重用,它提供了一种明确表述共性的方法.对象的一个新类可以从现有的类中派生,这个过程称为类继承.新类继 ...

  3. Windows Azure HandBook (5) Azure混合云解决方案

    <Windows Azure Platform 系列文章目录> 在很多情况下,我们都会遇到本地私有云和公有云做互通互联的混合云场景.对于这种混合云的场景,微软的Windows Azure会 ...

  4. 索引深入浅出(4/10)：非聚集索引的B树结构在聚集表

    一个表只能有一个聚集索引,数据行以此聚集索引的顺序进行存储,一个表却能有多个非聚集索引.我们已经讨论了聚集索引的结构,这篇我们会看下非聚集索引结构. 非聚集索引的逻辑呈现 简单来说,非聚集索引是表的子 ...

  5. Struts2 源码分析——项目分析

    项目知识点分析 从上一章中我们知道了接下来我们要去了解源码的项目(struts2-showcase).而这一章将讲述我三年后在次接触struts2-showcase项目是一个什么样子的情况.我有一个工 ...

  6. ASP.NET MVC PartialView用法

    子页面AreaSelect.cshtml页面的Controller代码: public ActionResult AreaSelect() { return PartialView(); } 父页面前 ...

  7. Swift 3 迁移工作总结

    写在前面 Swift 3.0 正式版发布了差不多快一个月了,断断续续的把手上和 Swift 相关的迁移到了Swift 3.0.所以写点小总结. 背景 代码量(4万行) 首先,我是今年年初才开始入手 S ...

  8. WIN-CE系统架构

    WIN-CE 系统架构分为素部分:硬件层.OEM 层.操作系统层.应用层 http://hovertree.com/hvtart/bjae/oy9pqb94.htm 硬件层: 由CPU .存储器.I/ ...

  9. 从vs2010的UnitTestFramework类库提取私有方法反射调用的方法

    背景 年龄大点的程序员都知道在vs2010中创建单元测试非常的简单,鼠标定位在方法名字,右键创建单元测试,就会创建一个测试方法,即使是在私有方法上也可以创建测试方法. VS2010以后就没这么简单了, ...

  10. MEF入门之不求甚解，但力求简单能讲明白(三)

    上一篇我们已经获得了制定类型的实例,但我们还无法对其进行有效的控制. 我们用ExportMetadata属性可以对具体的某个实例做标记,相当于命名.这么理解不知道对否. 在IPart项目中添加一个接口 ...