今天下午給用戶在做一個(gè)簡(jiǎn)單的單頁面網(wǎng)站的時(shí)候,用戶要求實(shí)現(xiàn)這樣的一個(gè)功能,打開網(wǎng)站頁面或者域名,能自動(dòng)跳轉(zhuǎn)到其中一個(gè)在中間位置的錨點(diǎn)。
這樣的情況很少有朋友會(huì)遇到,但是也不能因?yàn)橛玫蒙倬筒蝗ヌ幚恚旅媸?61模板網(wǎng)想的2種處理辦法,我們最終選擇的是第二種方法,大家可以一起來看下。
第一種方法、使用onLoad屬性實(shí)現(xiàn)
<body onLoad="scrollTo(0,10)"> //10代表離頂端的距離
這種方法簡(jiǎn)單,就是打開頁面的時(shí)候滾動(dòng)到距離頂部10px的位置停下來,是可以實(shí)現(xiàn)定位到錨點(diǎn)的,只需要計(jì)算好頂部到錨點(diǎn)的具體的距離就可以了,但是這樣的方法有一個(gè)小問題,就是如果該頁面是自適應(yīng)移動(dòng)端就會(huì)很麻煩,甚至可以說實(shí)現(xiàn)不了。我們?cè)倏纯吹诙N方法。
第二種方法、使用JS打開頁面跳轉(zhuǎn)定位到錨點(diǎn)位置
<script>window.onload=function(){location.hash='show'; }</script>
上面JS里的show就是我們的錨點(diǎn)的ID。
這樣在頁面被打開的時(shí)候就會(huì)直接跳轉(zhuǎn)定位到錨地名稱id="show"位置了,大家可以嘗試看下具體效果。
以上就是HTML中JS實(shí)現(xiàn)打開頁面直接跳轉(zhuǎn)到錨點(diǎn)位置的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)和解決疑問有所幫助,也希望大家多多支持武林網(wǎng)。新聞熱點(diǎn)
疑難解答
圖片精選