滾動(dòng)行為

網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、小程序定制開(kāi)發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了石門免費(fèi)建站歡迎大家使用！

使用前端路由，當(dāng)切換到新路由時(shí)，想要頁(yè)面滾到頂部，或者是保持原先的滾動(dòng)位置，就像重新加載頁(yè)面那樣。 vue-router 能做到，而且更好，它讓你可以自定義路由切換時(shí)頁(yè)面如何滾動(dòng)。

注意: 這個(gè)功能只在 HTML5 history 模式下可用。

scrollBehavior 方法接收 to 和 from 路由對(duì)象。第三個(gè)參數(shù) savedPosition 當(dāng)且僅當(dāng) popstate 導(dǎo)航 (通過(guò)瀏覽器的 前進(jìn)/后退 按鈕觸發(fā)) 時(shí)才可用。

const router = new VueRouter({
routes: [...],
scrollBehavior (to, from, savedPosition) {
 // return 期望滾動(dòng)到哪個(gè)的位置
}
}) 

返回滾動(dòng)位置的對(duì)象信息

{ x: number, y: number }
{ selector: string } 

如果返回一個(gè)布爾假的值，或者是一個(gè)空對(duì)象，那么不會(huì)發(fā)生滾動(dòng)。

  
滾動(dòng)行為
  

    
首頁(yè)
    
導(dǎo)航
    
關(guān)于
    
紅色頁(yè)面
    
藍(lán)色頁(yè)面
  
  

 

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。