Angular 4 - 滚动动画

14 浏览
0 Comments

Angular 4 - 滚动动画

我正在创建一个具有全页面宽度/高度的div的网页。

在向下滚动时，我有两种方法。

点击滚动

//HTML

//JS
    goToDiv(id) {
        let element = document.querySelector("#"+id);
        element.scrollIntoView(element);
      }

监听器滚动

  @HostListener("window:scroll", ['$event'])
  onWindowScroll($event: any): void {
    this.topOffSet = window.pageYOffset;
    //window.scrollTo(0, this.topOffSet+662);
  }

1. 如何添加滚动动画效果？

就像这样：

$('.scroll').on('click', function(e) {
    $('html, body').animate({
        scrollTop: $(window).height()
    }, 1200);
});

2. 如何使用HostListener滚动到下一个div？

0