原生JS實現頁面內定位

2022-07-02 08:27:11 字數 578 閱讀 2494

需求:點選跳轉到頁面指定位置

點選跳轉到此處

【法一】:

利用a標籤的錨點跳轉

點選跳轉

由於錨點跳的原理是改變雜湊值,所以會改變url

【法二】:

用js的scrollintoview方法

document.getelementbyid('test').scrollintoview()

此方法可以讓當前的元素滾動到瀏覽器視窗的可視區域內,不會改變url,但會有相容問題

獲取id為test的元素距離父元素頂部的位置,即offsettop, 改變父元素的scrolltop (父元素有定位,可滾動)

document.queryselector('.scrollelement').scrolltop = document.getelementbyid('test').offsettop;

在vue中,demo示例

點選

跳轉到此處

methods: `).offsettop ;

},}

定位效果 大前端頁內定位實現

目標 實現網頁點選跳轉到指定標籤 實現原理 在網頁內a標籤的href後面寫上 a,然後再在下面想定位的元素那加個name為a的,這樣兩者就建立起了對應關係。下面是個簡單演示,如圖 如下 color ff6600 sjkx color ff6600 1.面向過程 color ff6600 sjka c...

原生js實現Ajax

一般來說,大家可能都會習慣用jquery提供的ajax方法,但是用原生的js怎麼去實現ajax方法呢?jquery提供的ajax方法 ajax success function error function 原生js實現ajax方法 var ajax obj.send post function u...

原生js實現Ajax

ajax success function error function 原生js實現ajax方法 var ajax xhr.send datat應為 a a1 b b1 這種字串格式,在jq裡如果data為物件會自動將物件轉成這種字串格式 post function url,data,fn xhr...