Aurelia typescript滚动到页面顶部

如何滚动页面顶部或div/id元素

---

通过单击调用viewmodel（.ts）中的方法。是否使用窗口从视图（.html）将页面滚动到顶部或可选择的div by id等？如果，如何在aurelia/typescript中插入窗口？

我不完全明白您的问题，但是，下面是我如何在每个导航上滚动到页面顶部。也许这对你有帮助

我有一个滚动函数（

smoothScrollReset

），它获取一个元素（可以是每个元素）并根据给定的函数滚动到该元素（例如

linearTween（）

，您可以通过交换此函数来更改滚动行为）。我滚动到的元素是页面上的某个容器。 然后，我将渲染后管道步骤添加到Aurelia路由器。总而言之：

添加管道步骤：

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

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

管道步骤本身：

export class ScrollToTopStep {
  run(instruction, next) {
    let element = document.getElementsByTagName('main')[0];
    smoothScrollReset(element);
    return next();
  }
}

滚动功能：

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

导出功能平滑滚动重置（元素）{
if（！元素）{
回来
}
常数持续时间=200；
常量scrollFrom=element.scrollTop；
const diff=-scrollFrom；
让startTime=null；
让最后的补偿；
让滚动循环=（当前时间）=>{
让currentYOffset=element.scrollTop；
如果（！开始时间）{
开始时间=当前时间-1；
}
const timeappeased=当前时间-开始时间；
if（上次偏移）{
如果（（差异>0&&lastYOffset>currentYOffset）||
（差异<0和上一次偏移<当前偏移））{
回来
}
}
lastYOffset=当前yOffset；
element.scrollTop=linearTween（时间流逝、滚动起始、差异、持续时间）；
如果（时间经过<持续时间）{
window.requestAnimationFrame（滚动循环）；
}否则{
element.scrollTop=0；
}
};
window.requestAnimationFrame（滚动循环）；
}
函数线性（t，b，c，d）{
返回c*t/d+b；
}

这就是您要找的吗？你的问题很不清楚。还有，你已经试过什么了？仅回答您提出的最后一个问题，

window

是浏览器中的一个全局属性，因此不需要插入它。它只是在那里使用。