两千人站长交流群:462137404 / VIP用户交流群:462197261 收藏本站哈站网 zhan.ha.cn 精品建站资源第一站,让建站变得更加容易!
业务咨询:78895949 联系电话:13402647354
  • 当前位置:
  • HTML中锚点的使用_动力节点Java学院整理

    Html实例2018年05月30日关键词:

    现在总结一下控制锚点的几种情况:

    1. 在同一页面中
     

    <a name="add"></a><!-- 定义锚点 --><a href="#add">跳转到add</a>

    2. 在不同页面中,锚点定位在a.html中,从另外一个页面的链接跳转到这个锚点 

    <a href="a.html#add">跳转到a.add</a>

    3. 点击链接触发js事件,同时跳转到锚点,有两种处理方式:

    第一种:

    <a href="#add" onclick="add()">触发add函数并跳转到add锚点</a>

    第二种: 

    <div id="divNode"><!-- contents --></div><!-- 假设一个需要跳转到的节点 --><a href="#" onclick="document.getElemetnById('divNode').scrollIntoView(true);return false;">通过scrollIntoView实现锚点效果</a> 

    在html中设置锚点定位有几种方法,使用id定位、使用name定位、使用js定位,这些方法不一定是最全的,只可以参考下

    1、使用id定位:

    <a href="#1F" name="1F">锚点1</a> <div name="1F"> <p> 11111111111 </br> 11111111111 </br>11111111111 </br>11111111111 </br>11111111111 </br> </p> </div> 

    这样的定位可以针对任何标签来定位。

    2、使用name定位:

    <a href="#5F">锚点5</a> </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br> <a name="5F">1111111</href> 

    使用name属性只能针对a标签来定位,而对div等其他标签就不能起到定位作用。

    3、使用js定位

    <li class="" onclick="javascript:document.getElementById('here').scrollIntoView()"></li> 

    实例:

    js 锚点平滑定位  

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <head> <style type="text/css" mce_bogus="1"> div.test { width: 400px; margin: 5px auto; border: 1px solid #ccc; } div.test strong { font-size: 16px; background: #fff; border-bottom: 1px solid #aaa; margin: 0; display: block; padding: 5px 0; text-decoration: underline; color: #059B9A; cursor: pointer; } div.test p { height: 400px; background: #f1f1f1; margin: 0; } </style> <script type="text/javascript"> function intval(v){ v = parseInt(v); return isNaN(v) ? 0 : v; } // ?取元素信息 function getPos(e){ var l = 0; var t = 0; var w = intval(e.style.width); var h = intval(e.style.height); var wb = e.offsetWidth; var hb = e.offsetHeight; while (e.offsetParent) { l += e.offsetLeft + (e.currentStyle ? intval(e.currentStyle.borderLeftWidth) : 0); t += e.offsetTop + (e.currentStyle ? intval(e.currentStyle.borderTopWidth) : 0); e = e.offsetParent; } l += e.offsetLeft + (e.currentStyle ? intval(e.currentStyle.borderLeftWidth) : 0); t += e.offsetTop + (e.currentStyle ? intval(e.currentStyle.borderTopWidth) : 0); return { x: l, y: t, w: w, h: h, wb: wb, hb: hb }; } // ?取??条信息 function getScroll(){ var t, l, w, h; if (document.documentElement && document.documentElement.scrollTop) { t = document.documentElement.scrollTop; l = document.documentElement.scrollLeft; w = document.documentElement.scrollWidth; h = document.documentElement.scrollHeight; } else if (document.body) { t = document.body.scrollTop; l = document.body.scrollLeft; w = document.body.scrollWidth; h = document.body.scrollHeight; } return { t: t, l: l, w: w, h: h }; } // ?点(Anchor)?平滑跳? function scroller(el, duration){ if (typeof el != 'object') { el = document.getElementById(el); } if (!el) return; var z = this; z.el = el; z.p = getPos(el); z.s = getScroll(); z.clear = function(){ window.clearInterval(z.timer); z.timer = null }; z.t = (new Date).getTime(); z.step = function(){ var t = (new Date).getTime(); var p = (t - z.t) / duration; if (t >= duration + z.t) { z.clear(); window.setTimeout(function(){ z.scroll(z.p.y, z.p.x) }, 13); } else { st = ((-Math.cos(p * Math.PI) / 2) + 0.5) * (z.p.y - z.s.t) + z.s.t; sl = ((-Math.cos(p * Math.PI) / 2) + 0.5) * (z.p.x - z.s.l) + z.s.l; z.scroll(st, sl); } }; z.scroll = function(t, l){ window.scrollTo(l, t) }; z.timer = window.setInterval(function(){ z.step(); }, 13); } </script> </head> <body> <div class="test"> <a name="header_1" id="header_1"></a> <strong onclick="javascript:scroller('header_4', 800);">header_1 --> header_4</strong> <p> </p> </div> <div class="test"> <a name="header_2" id="header_2"></a> <strong onclick="javascript:scroller('header_5', 800);">header_2 --> header_5</strong> <p> </p> </div> <div class="test"> <a name="header_3" id="header_3"></a> <strong onclick="javascript:scroller('header_6', 800);">header_3 --> header_6</strong> <p> </p> </div> <div class="test"> <a name="header_4" id="header_4"></a> <strong onclick="javascript:scroller('header_7', 800);">header_4 --> header_7</strong> <p> </p> </div> <div class="test"> <a name="header_5" id="header_5"></a> <strong onclick="javascript:scroller('header_3', 800);">header_5 --> header_3</strong> <p> </p> </div> <div class="test"> <a name="header_6" id="header_6"></a> <strong onclick="javascript:scroller('header_2', 800);">header_6 --> header_2</strong> <p> </p> </div> <div class="test"> <a name="header_7" id="header_7"></a> <strong onclick="javascript:scroller('header_1', 800);">header_7 --> header_1</strong> <p> </p> </div> </body></html>

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    其他网友正在看:
    关于表格table嵌套,边框合并问题的解决方法

    【问题】外层table与内层table嵌套,内外表格都需边框时,设置“border=1”,但边框会重复,造成某些地方边框粗,有些地方边框细的问题。 【解决办法】:外表格样式:<table border="1" cellspacing="0" cellpadding="0" st···

    2018-05-30关键词:

    HTML标签marquee实现滚动效果的简单方法(必看)

    页面的自动滚动效果,可由javascript来实现,但是今天无意中发现了一个html标签 – <marquee></marquee>可以实现多种滚动效果,无需js控制。使用marquee标记不仅可以移动文字,也可以移动图片,表格等.语法:<marquee>…</marquee>; 说明···

    2018-05-30关键词:

    XHTML中的超链接标签使用教程

    超链接,也叫“链接”。超链接在我们浏览的网页上可以说是无处不在,我们点击网页上某个链接地址,即链接到另一个网页,这就是超链接在起作用。使用 <a></a> 标签来定义超链接,语法:<a href="url">显示的文字或图片</a>例子:···

    2018-05-30关键词:

    关于alt和title的用法区别详解

    经常用到这两个属性,但是一直没有总结他们的区别。现在我对他们两个的用法做一下总结:相同点:他们都会飘出一个小浮层,显示文本内容。不同点:1.alt只能是元素的属性,而title即可以是元素的属性也可以是标签,例如:<title>标题</title>。2.alt属性则是用来···

    2018-05-30关键词:

    关于html的表单元素详解(二)

    HTML Input 属性value 属性value 属性规定输入字段的初始值:<form action=""><input type="text" name="name" value="脚本之家"></form> readonly 属性readonly 属性规定输入字段为只读(不能修改):&···

    2018-05-30关键词:

    提交表单后转到另一个文件

    问题:在HTML中如何写跳转到某文件?HTML中我希望按了提交后转到aaa.asp这个文件,action这里应该怎么写?form<form id="form" name="form" method="post" action=""> <input type="submit" name="Submit&q···

    2018-05-30关键词: