背景:使用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. 带你了解Boom 3D的Mac版音效模式

    音乐是很好的情绪抒发途径,因为音乐蕴含了很多信息,包含了很多情感,所以我们聆听不同种类的音乐的时候会产生不同的心理感受.这就是音乐的魅力,可以让人产生共鸣引发无数的思绪.为了能够更好的体会感受音乐可以 ...

  2. 安装Ubuntu时到底该如何分区

    安装系统:Ubuntu16.04(单系统) /(根分区),主分区,   Ext4文件系统,100G-200G /boot分区,   逻辑分区,Ext4文件系统,~200MB /home分区, 逻辑分区 ...

  3. 基于Koa2+mongoDB的后端博客框架

    主要框架:koa2全家桶+mongoose+pm2. 在阅读前建议将项目克隆到本地配合食用,否则将看得云里雾里. 项目地址:https://github.com/YogurtQ/koa-server. ...

  4. [CF1454] Codeforces Round #686 (Div. 3) solution

    标签(空格分隔): 经验 题解 时量 : 2h 概括 : \[\text{2min t1 }\\ \text{10min t2 (hacked)}\\ \text{30min t3 }\\ \text ...

  5. C Looooops POJ - 2115

    数论好题.. 香! 首先我们看到这一题, 题意是 \[a + c * x \equiv b (mod \ \ 2 ^ k) \] 对此式移一下项, 得 \[c * x \equiv b - a (mo ...

  6. CentOS 防火墙常用命令

    1.查看防火墙状态: firewall-cmd --state 2.启动防火墙 systemctl start firewalld 3.关闭防火墙 systemctl stop firewalld 4 ...

  7. CentOS rsync小结

    前言 与cp,scp不同的是rsync工具不但可以本地拷贝,还可以远程拷贝以及同步数据. rsync工具在做数据备份方便非常受欢迎.试想一下,如果有数千万个文件或目录你怎么样制定拷贝计划呢?每一个选项 ...

  8. Spring Cloud 学习 (一) Eureka

    微服务的功能主要有以下几个方面: 服务的注册和发现 服务的负载均衡 服务的容错 服务网关 服务配置的统一管理 链路追踪 实时日志 服务注册是指向服务注册中心注册一个服务实例,服务提供者将自己的服务信息 ...

  9. 数据库:Flask-SQLAlchemy

    一.安装以及使用 1.安装 安装 flask-sqlalchemy pip install flask-sqlalchemy 如果连接的是 mysql 数据库,需要安装 mysqldb pip ins ...

  10. PyQt(Python+Qt)学习随笔:Qt Designer中部件的焦点策略focusPolicy设置

    在Qt Designer中可以设置部件的焦点策略,部件的焦点策略属性取值范围由枚举类型Qt.FocusPolicy来定义,该枚举类型及其含义如下表所示: 注意:经老猿测试鼠标轮滚动获取焦点,只有在鼠标 ...