angular8 页面滚动到某一个特定位置

背景:使用angular8安装的 Fuse-v8.0.0-demo 后台的框架

锚点: id='nearby'

流程:无论是点击触发方法也好,还是直接调用方法也好,这里只写

 

引入:

import {Component, ViewEncapsulation, OnInit, OnDestroy, ElementRef, ViewChild, AfterViewInit} from '@angular/core';
import {FusePerfectScrollbarDirective} from '../../../../../@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';

属性:

@ViewChild(FusePerfectScrollbarDirective, {static: false})
directiveScroll: FusePerfectScrollbarDirective;

 

方法:

// 在页面渲染完成时,开始执行这个方法

ngAfterViewInit(): void
{
setTimeout(() => {
this.scrollToBottom();
});
}

/**
* Scroll to the bottom
* speed是页面滚动的速度  
* @param {number} speed
*/
scrollToBottom(speed?: number): void
{
speed = speed || 400;
if ( this.directiveScroll )
{
// this.directiveScroll.update();

setTimeout(() => {
this.directiveScroll.scrollToElement('#nearday' , 0 , speed); //页面滚动到nearday的地方
});
}
}


页面渲染部分:
在html页面中滚动的那个div加上 放上属性
fusePerfectScrollbar

<div 这里外层的div要overflow:hidden>
  <div fusePerfectScrollbar 这里是滚动的部分>
    <section>这里是内容</section>
  </div>
</div>

 

posted @ 2019-11-12 15:31  fpc  阅读(3292)  评论(0编辑  收藏  举报