背景:使用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. 如何使用ABBYY FineReader 的用户模式?

    在运用ABBYY FineReader 15(Windows系统)进行文档识别时,用户可能会遇到识别的文档包含一些特殊字符或者其他软件无法识别的字体等情况,容易造成识别出现乱码的结果.在这种情况下,用 ...

  2. 关于GoldWave为Vegas制作音频交叉淡化特效的教程分享

    在Vegas里对音频交叉淡化的处理,是通过将两段音频交叠.调整交叠部分的音量.选取交叉淡化类型这三步来实现的,许多步骤是在音频轨道拖动音量线来实现的,操作上不够灵敏精细.其实,单就音频的交叉淡化处理, ...

  3. Ubuntu无法telnet

    1.Ubuntu无法telnet的原因 (1)/etc/hosts被修改过 (2)防火墙没有关闭 (3)没有安装相关服务 (4)/etc/inetd.conf文件没有telnet相关内容 2.解决办法 ...

  4. 堆的数据结构java

    public class MaxHeap { private int[] data; private int count; private int capacity; public MaxHeap(i ...

  5. Java集合【8】-- ArrayList源码分析

    目录 1. ArrayList 1.1 ArrayList特点介绍 1.2 实现的接口和继承的类 2. 成员变量 3. 构造方法 4. 常用增删改查方法 添加元素 查询元素 更新元素 删除元素 5.自 ...

  6. dubbo与zk

    一.总体流程: 1.服务提供者启动时,会向注册中心写入自己的元数据信息,同时会订阅配置元数据信息: 2.消费者启动时,也会向注册中心写入自己的元数据信息,并订阅服务提供者.路由和配置元数据信息: 3. ...

  7. 1. 揭秘Spring类型转换 - 框架设计的基石

    仰不愧天,俯不愧人,内不愧心.关注公众号[BAT的乌托邦],有Spring技术栈.MyBatis.JVM.中间件等小而美的原创专栏供以免费学习.分享.成长,拒绝浅尝辄止.本文已被 https://ww ...

  8. 关于 [栈溢出后jmp esp执行shellcode] 原理分析

    原文地址:https://blog.csdn.net/lixiangminghate/article/details/53333710 正常情况下,函数栈分布图如下: 即,返回地址被改为一段缓存区的地 ...

  9. JZOJ【NOIP2013模拟联考14】隐藏指令

    JZOJ[NOIP2013模拟联考14]隐藏指令 题目 Description 在d维欧几里得空间中,指令是一个长度为2N的串.串的每一个元素为d个正交基的方向及反方向之一.例如,d = 1时(数轴) ...

  10. YoyoGo使用指南

    YoyoGo是一个使用Golang编写的一个简单.轻量.快速.基于依赖注入的微服务框架,目前依然在研发阶段,欢迎Star以及一起参与到框架的研发 GitHub地址:https://github.com ...