Question

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

viewmodel（.ts）中的方法由click.delegate从视图（.html）调用滚动页面到顶部或按ID等可选div。通过使用窗口？如果，如何在aurelia / typescript中注入窗口？

Answer 1

我没有完全得到您的问题，但是，这是我在每个导航上滚动到页面顶部的方式。也许这会对你有所帮助。

我有一个滚动函数（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;
}

Aurelia打字稿滚动到页面顶部

1 个答案: