Home >Web Front-end >HTML Tutorial >html页面定位，指定位置(暂时整理点,以后有更好的再换）_html/css_WEB-ITnose
html页面定位，指定位置(暂时整理点,以后有更好的再换）_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 09:00:521531browse
因为页面有点长，所以页面点位试了一下，可以的。页面定位，两种情况：1、A页面跳到B页面，滚动到页面的任何地方；2、在一个页面内由于页面太长，需要定位。
情况1：
首先在A页面创建一个锚点
<body><a href="b.html#pos" target="_blank">点击跳转</a><body>
然后在B页面定义这个锚点
<body><div name="pos" id="pos"></div></body>
同时把name和id都写上这样兼容性好。
情况2：
1使用锚点 的方式
2jQuery的aminate的方法
<body> <script type="text/javascript"> function click_scroll() { var scroll_offset = $("#pos").offset(); //得到pos这个div层的offset，包含两个值，top和left $("body,html").animate({ scrollTop:scroll_offset.top //让body的scrollTop等于pos的top，就实现了滚动 },0); //0是代表移动的时间，1000代表1秒 } </script> <input type="button" value="点击button跳转" onclick="click_scroll();" /> <div id="pos">滚动到这里</div><body> 3使用聚焦的方式，
<a href="javascript:void(0)" document.getElementById('abc').focus();">快速定位1</a> //让abc获取焦点 4通过scrollIntoView方法来实现定位：
<a href="javascript:void(0)" onclick="document.getElementById('am').scrollIntoView();">快速定位1</a> 5通过window.location.hash实现：
<a href="javascript:void(0)" onclick="window.location.hash='am'">快速定位2</a>
个人倾向与Jquery的aminate效果好！毕竟是可设动画的。
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：实例CSS3开场动画的制作与优化_html/css_WEB-ITnoseNext article：Tocify：动态节点目录菜单生成器_html/css_WEB-ITnose