html页面定位，指定位置(暂时整理点,以后有更好的再换）_html/css_WEB-ITnose
Jun 21, 2016 am 09:00 AM
因为页面有点长，所以页面点位试了一下，可以的。页面定位，两种情况：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效果好！毕竟是可设动画的。
Heißer Artikel
Hot-Tools-Tags
Heißer Artikel
Heiße Artikel -Tags
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Schwierigkeiten bei der Aktualisierung der Zwischenspeicherung offizieller Konto -Webseiten: Wie vermeiden Sie den alten Cache, der sich auf die Benutzererfahrung nach der Versionsaktualisierung auswirkt?
Mar 04, 2025 pm 12:32 PM
Schwierigkeiten bei der Aktualisierung der Zwischenspeicherung offizieller Konto -Webseiten: Wie vermeiden Sie den alten Cache, der sich auf die Benutzererfahrung nach der Versionsaktualisierung auswirkt?
Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren?
Mar 17, 2025 pm 12:27 PM
Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren?
Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung?
Mar 20, 2025 pm 06:05 PM
Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung?
Wie füge ich PNG -Bildern auf Webseiten effizient Schlaganfalleffekte hinzu?
Mar 04, 2025 pm 02:39 PM
Wie füge ich PNG -Bildern auf Webseiten effizient Schlaganfalleffekte hinzu?
Was ist der Zweck des & lt; Meter & gt; Element?
Mar 21, 2025 pm 12:35 PM
Was ist der Zweck des & lt; Meter & gt; Element?
Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5?
Mar 17, 2025 pm 12:20 PM
Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5?
Was ist der Zweck des & lt; datalist & gt; Element?
Mar 21, 2025 pm 12:33 PM
Was ist der Zweck des & lt; datalist & gt; Element?
Was ist der Zweck des & lt; Fortschritts & gt; Element?
Mar 21, 2025 pm 12:34 PM
Was ist der Zweck des & lt; Fortschritts & gt; Element?
