Heim > Web-Frontend > HTML-Tutorial > html页面定位,指定位置(暂时整理点,以后有更好的再换)_html/css_WEB-ITnose

html页面定位,指定位置(暂时整理点,以后有更好的再换)_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-21 09:00:52
Original
1530 Leute haben es durchsucht

        因为页面有点长,所以页面点位试了一下,可以的。页面定位,两种情况:1、A页面跳到B页面,滚动到页面的任何地方;2、在一个页面内由于页面太长,需要定位。

情况1:          

首先在A页面创建一个锚点

<body><a href="b.html#pos" target="_blank">点击跳转</a><body>
Nach dem Login kopieren

然后在B页面定义这个锚点

<body><div name="pos" id="pos"></div></body>
Nach dem Login kopieren

同时把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>
Nach dem Login kopieren

3使用聚焦的方式,

<a href="javascript:void(0)" document.getElementById('abc').focus();">快速定位1</a> //让abc获取焦点
Nach dem Login kopieren


4通过scrollIntoView方法来实现定位:

<a href="javascript:void(0)" onclick="document.getElementById('am').scrollIntoView();">快速定位1</a>
Nach dem Login kopieren

5通过window.location.hash实现:

<a href="javascript:void(0)" onclick="window.location.hash='am'">快速定位2</a>
Nach dem Login kopieren

个人倾向与Jquery的aminate效果好!毕竟是可设动画的。

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage