頁面內錨點定位及跳轉方法總結

2022-08-23 15:42:11 字數 715 閱讀 2514

最簡單的方法是錨點用標籤,在href屬性中寫入div的id。如下:

div1

div2

div3

這種方法的缺點是點選錨點之後,瀏覽器的url會發生變化,如果重新整理可能會出現問題。 

第二種方式是在js事件中通過window.location.hash="divid"跳轉,但位址也會發生變化,感覺跟第一種方法沒區別,甚至更麻煩。

第三種方法是用animate屬性,當點選錨點後,頁面滾動到相應的div。接著上面的**,具體新增如下**:

注意:執行上面的指令碼的之前,先將為錨點增加相應的id,同時去掉href屬性。

$("html, body")可以替換為響應的div,如果不起作用,試著給該div增加overflow:scroll屬性。
另外,指令碼可以進一步優化,自己來試試

缺點是:如果頁面複雜的話,偏移值可能會發生變化需要演算法輔助。

第四種方法是用js的srollintoview方法,直接用:

document.getelementbyid("divid").scrollintoview();

這種方法的好處,是url不會變,同時能夠響應相應的scroll事件,不需要演算法什麼的。

推介大家用第四種,我依次試了前三種,都有各種問題(可能是頁面較複雜的緣故吧,當然,技術不咋也是。。。)   

錨點定位跳轉的各種實現方法

使用錨點跳轉做的靜態頁面,沒有一點問題,但是經過他加的php後,就不跳轉了,坑爹的玩意!在除錯過程中,找了好多的錨點跳轉的方法,寫在這裡,一起分享 平滑移動到 想要的位置 function 3000 根據引數名獲得該引數 pname等於想要的引數名 function getparam pname e...

vue中,實現錨點定位及跳轉(url不發生變化)

直接上 divclass footer click returntop methods 如果滾動頁面也是dom沒有解決的乙個問題。為了解決這個問題,瀏覽器實現了一下方法,以方便開發人員如何更好的控制頁面的滾動。在各種專有方法中,html5選擇了scrollintoview 作為標準方法。scroll...

JQuery 仿錨點跳轉到頁面指定位置

標題 這是標題的內容 document ready function 1000 帶滑動效果的跳轉 html,body scrolltop target top 獲取匹配元素在當前視口的相對偏移。返回的物件包含兩個整型屬性 top 和 left。此方法只對可見元素有效。獲取匹配元素相對父元素的偏移。返...