Aurelia typescriptページの先頭に戻る

Question

ページトップトップまたはdiv/id要素をスクロールする方法はありますか？

view.model（.ts）のメソッドは、view（.html）スクロールページから上に移動するか、idで選択可能なdivなどに呼び出されます。場合は、どのようにaurelia/typescriptのウィンドウを注入するには？

Answer 1

あなたの質問は完全には分かりませんが、ここでは各ナビゲーションのページの上にスクロールする方法を示します。これはおそらくあなたを助けます。

私はスクロール機能（すべての要素になり得る）を取得し、所定の機能に基づいてその要素にスクロールする（例えばlinearTween()、これを交換することによってスクロール動作を変更することができる）。私がスクロールする要素は、ページ上のいくつかのコンテナです。 次に、ポスト・レンダリング・パイプライン・ステップを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; 
}