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. 【转】SQL 操作类

    using System; using System.Collections.Generic; using System.Text; using System.Data; using System.D ...

  2. 深入浅出JSONP--解决ajax跨域问题

    取不到数据! 上周客户新买了服务器,原本在旧的服务器上放着客户的Web主页信息和一个后台程序(asp.net),在客户的主页中有一个动态显示最新消息的处理,这个处理就是通过ajax异步从那个后台程序中 ...

  3. Android安装BusyBox(三星N7108)

    近期公司安卓app测试,分配任务为监控APP内存.CPU占用率.因安卓是基于linux开发,故很容易就联想使用Linux监控相关的命令.想法总是美好的,现实总是残酷的,使用三星 Galaxy Note ...

  4. 玩爽了！直接在Chrome里抓取数据

    一个小测试发现可以自动做题,于是想通过脚本的方式看能不能获取相应的题库,刚好可以学习一下JS异步操作.花了一天时间,总算跑顺利了,遇到了不少坑.记录下来分享. 1.JS如何顺序执行 JS有强大的异步操 ...

  5. Socket.Available 属性

    获取已经从网络接收且可供读取的数据量. 命名空间:   System.Net.Sockets程序集:  System(System.dll 中) 从网络接收的.可供读取的数据的字节数. 异常   Ex ...

  6. 使用VS Code开发调试ASP.NET Core 1.0

    使用VS Code开发调试ASP.NET Core 1.0,微软在今天凌晨发布了.NET Core 1.0,ASP.NET Core 1.0 与 Entity Framewok 1.0. 之前跟大家讲 ...

  7. 关于JQuery（最后一点动画效果*）

    1,$(':radio').val(['1','2','3']);//特殊写法,把值为1 2 3的都选中. 2,math.abs(len)取绝对值 3,按钮高亮显示,一般是配置两个按钮,一个普通的,一 ...

  8. 使用POI替换word中的特定字符/文字改进版

    package com.xfzx.test.POI.main; import java.io.File; import java.io.FileInputStream; import java.io. ...

  9. HTTP & HTTPs

    HTTP HTTP 消息 HTTP 方法 参考 [1]. HTTP 协议初识 - 阮一峰: HTTPS 参考 [1]. HTTPS 升级指南 - 阮一峰:

  10. Eclipse上GIT插件EGIT使用手册

    http://blog.csdn.net/luckarecs/article/details/7427605 Eclipse上GIT插件EGIT使用手册   一_安装EGIT插件 http://dow ...