背景:使用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>

angular8 页面滚动到某一个特定位置的更多相关文章

  1. 页面滚动到指定class样式位置

    var winTop =$(window).scrollTop(); var top = document.getElementsByClassName('is-danger')[0].getBoun ...

  2. 设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示;当页面滚动到起始位置时,头部div出现,底部div隐藏

    设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示: 当页面滚动到起始位置时,头部div出现,底部div隐藏 前端代码: <! ...

  3. 【特效】页面滚动到相应位置运行css3动画

    请到我的个人博客网站上浏览此文章,欢迎评论和建议. 文章链接:http://www.xiaoxianworld.com/archives/87 现在css3动画很常见了,实际项目中经常应用,特别是那种 ...

  4. 【HTML】网页中如何让DIV在网页滚动到特定位置时出现

    用js或者jquery比较好实现.但你要知道,滚动到哪个特定位置,例如滚动到一个标题h3那显示这个div,那么可以用jquery算这个h3距离网页顶部的距离:$("h3").off ...

  5. H5小技巧之——巧用<a>标签锚链接(#锚点链接 #页面特定位置 #DOM定位 #hash路由中使用锚链接)

    #作者:矩阵鱼--代码中游泳的咸鱼 前端开发中,常遇到定位到页面某特定位置的需求,JavaScript提供的el.scrollIntoView() 和 el.scrollIntoViewIfNeede ...

  6. AOS – 另外一个独特的页面滚动动画库(CSS3)

    AOS 是一个用于在页面滚动的时候呈现元素动画的工具库,你可能会觉得它和 WOWJS 一样,的确他们效果是类似的.但是AOS是 CSS3 动画驱动的库,当你滚动页面的时候能让元素动起来,当页面滚回顶部 ...

  7. js-点击按钮页面滚动到顶部,底部,指定位置

    之所以笔记一下这个,因为我在项目中经常用到. $('.scroll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, ...

  8. jQuery-点击按钮页面滚动到顶部,底部,指定位置

    $('.scroll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); //页面滚动至顶部 $('. ...

  9. 微信小程序(13)--页面滚动到某个位置添加类效果

    微信小程序页面滚动到某个位置添加类,盒子置顶效果. <!-- vh,是指CSS中相对长度单位,表示相对视口高度(Viewport Height),1vh = % * 视口高度 --> &l ...

随机推荐

  1. nginx学习http_auth_basic_module模块

    对2.html页面做授权操作 先进行账号密码的生成  使用  htpasswd -c /etc/nginx/auth_conf  用户名 输入2次密码 (如果没有htpasswd,可以使用yum  - ...

  2. 面试题59 - II. 队列的最大值

    请定义一个队列并实现函数 max_value 得到队列里的最大值,要求函数max_value.push_back 和 pop_front 的时间复杂度都是O(1). 若队列为空,pop_front 和 ...

  3. FL Studio——电音编曲人的奠基石

    随着近年来摇滚.电音的发展,越来越多的人开始对电子音乐编曲感兴趣,而电音编曲的首要条件,就是需要一个好的DAW(数字音频工作站),常用的DAW有很多,例如Cubase.Nuendo.Pro Tools ...

  4. Java数据结构(十二)—— 霍夫曼树及霍夫曼编码

    霍夫曼树 基本介绍和创建 基本介绍 又称哈夫曼树,赫夫曼树 给定n个权值作为n个叶子节点,构造一棵二叉树,若该树的带权路径长度(wpl)达到最小,称为最优二叉树 霍夫曼树是带权路径长度最短的树,权值较 ...

  5. 网骗欺诈?网络裸奔?都是因为 HTTP?

    先跟大家讲个故事,我初恋是在初中时谈的,我的后桌的后桌.那个时候没有手机这类的沟通工具,上课交流有三宝,脚踢屁股.笔戳后背以及传纸条,当然我只能是那个屁股和后背,还不是能让初恋踢到的后背. 但是说实话 ...

  6. Centos7安装Kubernetes k8s v1.16.0 国内环境

    一. 为什么是k8s v1.16.0? 最新版的v1.16.2试过了,一直无法安装完成,安装到kubeadm init那一步执行后,报了很多错,如:node xxx not found等.centos ...

  7. springboot:读取application.yml文件

    现在开发主要使用微服务框架springboot,在springboot中经常遇到读取application.yml文件的情形. 一.概述 开发过程中经常遇到要读取application.yml文件中的 ...

  8. 通过Dbeaver创建表格的时候,设置主键

    通过Dbeaver创建表格的时候,设置主键 Dbeaver介绍: ​ 这是一个开源的数据库连接工具,你需要安装jre才可以使用这个软件 在使用Dbeaver创建表的时候,会发现,不能直观地设置主键 这 ...

  9. 分布式存储系统-HDFS

    1 HDFS 架构 HDFS作为分布式文件管理系统,Hadoop的基础.HDFS整体架构包括:NameNode.DataNode.Secondary NameNode,如图: HDFS采用主从式的分布 ...

  10. Java面试专题-多线程(3)-原子操作