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; 
}