HTML5实现锚点时请使用id取代name


Posted in HTML / CSS onSeptember 06, 2013

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
<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;">
<a href="http://keleyi.com/dev/94fb5964c80ee829.htm" target="_blank">绿色箭头图片返回顶部效果</a>
<a href="http://keleyi.com/a/bjac/7cc2358ac924ebc5.htm" target="_blank">蓝色方块返回顶部</a>
<a href="http://keleyi.com/a/bjac/6f008786225269ac.htm" target="_blank">纯文本返回顶部</a>
<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;">keleyi.com</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
HTML / CSS 相关文章推荐
CSS心形加载的动画源码的实现
Mar 09 HTML / CSS
css3一款3D字体带阴影效果的实现步骤
Mar 20 HTML / CSS
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
Apr 26 HTML / CSS
CSS3的first-child选择器实战攻略
Apr 28 HTML / CSS
HTML5的文档结构和新增标签完全解析
Apr 21 HTML / CSS
如何使用localstorage代替cookie实现跨域共享数据问题
Apr 18 HTML / CSS
详解Canvas 实现炫丽的粒子运动效果(粒子生成文字)
Feb 01 HTML / CSS
详解html5 shiv.js和respond.min.js
Jan 24 HTML / CSS
html5 制作地图当前定位箭头的方法示例
Jan 10 HTML / CSS
HTML5 实现图片上传预处理功能
Feb 06 HTML / CSS
从QQtabBar看css命名规范BEM的详细介绍
Aug 07 HTML / CSS
Canvas绘制像素风图片的示例代码
Sep 25 HTML / CSS
html5 利用canvas实现超级玛丽简单动画
Sep 06 #HTML / CSS
HTML5 贪吃蛇游戏实现思路及源代码
Sep 03 #HTML / CSS
HTML5实现经典坦克大战坦克乱走还能发出一个子弹
Sep 02 #HTML / CSS
HTML5实现一个能够移动的小坦克示例代码
Sep 02 #HTML / CSS
HTML5 window/iframe跨域传递消息 API介绍
Aug 26 #HTML / CSS
HTML5在a标签内放置块级元素示例代码
Aug 23 #HTML / CSS
HTML5 script元素async、defer异步加载使用介绍
Aug 23 #HTML / CSS
You might like
PHP3 safe_mode 失效漏洞
2006/10/09 PHP
PHP Header用于页面跳转时的几个注意事项
2016/10/21 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
PHP使用file_get_contents发送http请求功能简单示例
2018/04/29 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
javawscript 三级菜单的实现原理
2009/07/01 Javascript
jQuery实现图片放大预览实现原理及代码
2013/09/12 Javascript
可插入图片的TEXT文本框
2013/12/27 Javascript
jquery将一个表单序列化为一个对象的方法
2014/01/03 Javascript
详细分析使用AngularJS编程中提交表单的方式
2015/06/19 Javascript
JavaScript电子时钟倒计时
2016/01/09 Javascript
jQuery展示表格点击变色、全选、删除
2017/01/05 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
2017/03/13 Javascript
使用Angular自定义字段校验指令的方法示例
2019/02/01 Javascript
mpvue性能优化实战技巧(小结)
2019/04/17 Javascript
详解Vue底部导航栏组件
2019/05/02 Javascript
react native 仿微信聊天室实例代码
2019/09/17 Javascript
vue导航栏部分的动态渲染实例
2019/11/01 Javascript
Vue数据双向绑定底层实现原理
2019/11/22 Javascript
浅谈python 线程池threadpool之实现
2017/11/17 Python
Pytorch 实现自定义参数层的例子
2019/08/17 Python
使用Python实现将多表分批次从数据库导出到Excel
2020/05/15 Python
python中zip()函数遍历多个列表方法
2021/02/18 Python
Larsson & Jennings官网:现代瑞士钟表匠
2018/03/20 全球购物
Surfdome西班牙:世界上最受欢迎的生活方式品牌
2019/02/13 全球购物
大学生思想汇报范文
2013/12/31 职场文书
物流仓储计划书
2014/01/10 职场文书
竞聘副主任科员演讲稿
2014/01/11 职场文书
骨干教师培训感言
2014/01/16 职场文书
资助贫困学生倡议书
2014/05/16 职场文书
医院党员公开承诺书
2014/08/30 职场文书
用人单位聘用意向书
2015/05/11 职场文书
卡特教练观后感
2015/06/08 职场文书
当你焦虑迷茫时,请读读这6句话
2019/07/24 职场文书
2019关于垃圾分类处理的调查报告
2019/12/26 职场文书
Html5调用企业微信的实现
2021/04/16 HTML / CSS