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 相关文章推荐
详解css3 object-fit属性
Jul 27 HTML / CSS
一款纯css3制作的2015年元旦雪人动画特效教程
Dec 29 HTML / CSS
css3实现简单的白云飘动背景特效
Oct 28 HTML / CSS
html5配合css3实现带提示文字的输入框(摆脱js)
Mar 08 HTML / CSS
html5文字阴影效果text-shadow使用示例
Jul 25 HTML / CSS
HTML5 placeholder(空白提示)属性介绍
Aug 07 HTML / CSS
深入浅析HTML5中的SVG
Nov 27 HTML / CSS
整理HTML5中表单的常用属性及新属性
Feb 19 HTML / CSS
Web前端页面跳转并取到值
Apr 24 HTML / CSS
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
Aug 18 HTML / CSS
Canvas 像素处理之改变透明度的实现代码
Jan 08 HTML / CSS
CSS中使用grid布局实现一套模板多种布局
Jul 15 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
晋城吧对DiscuzX进行的前端优化要点
2010/09/05 PHP
php生成随机密码自定义函数代码(简单快速)
2014/05/10 PHP
THINKPHP内容分页代码分享
2015/01/14 PHP
PHP发送邮件确认验证注册功能示例【修改别人邮件类】
2019/11/09 PHP
12个非常有创意的JavaScript小游戏
2010/03/18 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
2012/11/24 Javascript
AngularJS控制器详解及示例代码
2016/08/16 Javascript
对js中回调函数的一些看法
2016/08/29 Javascript
原生js实现日期计算器功能
2017/02/17 Javascript
JavaScript中数组Array.sort()排序方法详解
2017/03/01 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
2017/08/16 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
2017/12/15 Javascript
js判断输入框不能为空格或null值的实现方法
2018/03/02 Javascript
angularjs的单选框+ng-repeat的实现方法
2018/09/12 Javascript
js实现tab栏切换效果
2020/08/02 Javascript
vue组件开发之slider组件使用详解
2020/08/21 Javascript
python 中字典嵌套列表的方法
2018/07/03 Python
Python使用pickle模块实现序列化功能示例
2018/07/13 Python
python3使用pandas获取股票数据的方法
2018/12/22 Python
Python读取csv文件分隔符设置方法
2019/01/14 Python
Python获取Redis所有Key以及内容的方法
2019/02/19 Python
Python 实现毫秒级淘宝抢购脚本的示例代码
2019/09/16 Python
python爬虫爬取笔趣网小说网站过程图解
2019/11/18 Python
如何将Pycharm中调整字体大小的方式设置为&quot;ctrl+鼠标滚轮上下滑&quot;
2020/11/17 Python
详解Selenium 元素定位和WebDriver常用方法
2020/12/04 Python
总结30个CSS3选择器
2017/04/13 HTML / CSS
CSS3为背景图设置遮罩并解决遮罩样式继承问题
2020/06/22 HTML / CSS
杭州信雅达系统.NET工程师面试试题
2015/02/08 面试题
一套中级Java程序员笔试题
2015/01/14 面试题
财务专业大学生职业生涯规划范文
2013/12/30 职场文书
生产部岗位职责范文
2014/02/07 职场文书
怎样写好自我评价呢?
2014/02/16 职场文书
商场促销活动总结
2014/07/10 职场文书
2015夏季作息时间调整通知
2015/04/24 职场文书
DE1107机评
2022/04/05 无线电
Windows Server 2019 域控制器安装图文教程
2022/04/28 Servers