Aurelia打印稿滾動到頁面頂部

Question

如何滾動頁面頂部或div/id元素？

從click.delegate調用viewmodel（.ts）中的方法從視圖（.html）滾動頁面頂部或按ID選擇div等通過使用窗口？如果，如何在aurelia/typescript中注入窗口？

Answer 1

我完全沒有收到您的問題，但是，這裏是我如何滾動到每個導航頁面的頂部。也許這對你有幫助。我有一個滾動功能（smoothScrollReset），它獲得一個元素（可以是每個元素），並根據給定的函數滾動到該元素（例如，linearTween()，你可以通過交換這個滾動行爲來改變）。我滾動到的元素是頁面上的一些容器。 然後，我將一個post渲染管道步驟添加到Aurelia路由器。總之：

添加管道步：

... 
let appRouterConfig = config => { 
    config.addPipelineStep('postRender', ScrollToTopStep); 
}; 

this.router.configure(appRouterConfig); 
... 

管道步驟本身：

滾動功能：

export function smoothScrollReset(element) { 
    if (!element) { 
    return; 
    } 

    const duration = 200; 
    const scrollFrom = element.scrollTop; 
    const diff = -scrollFrom; 
    let startTime = null; 
    let lastYOffset; 
    let scrollLoop = (currentTime) => { 
    let currentYOffset = element.scrollTop; 
    if (!startTime) { 
     startTime = currentTime - 1; 
    } 

    const timeElapsed = currentTime - startTime; 
    if (lastYOffset) { 
     if ((diff > 0 && lastYOffset > currentYOffset) || 
     (diff < 0 && lastYOffset < currentYOffset)) { 
     return; 
     } 
    } 

    lastYOffset = currentYOffset; 
    element.scrollTop = linearTween(timeElapsed, scrollFrom, diff, duration); 
    if (timeElapsed < duration) { 
     window.requestAnimationFrame(scrollLoop); 
    } else { 
     element.scrollTop = 0; 
    } 
    }; 

    window.requestAnimationFrame(scrollLoop); 
} 

function linearTween(t, b, c, d) { 
    return c * t/d + b; 
}