背景:使用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企业版与标准版有一个重大的区别,就是企业版有对比文档的功能,今天通过下面的文档对比实例,来向大家展示一下OCR文字识别工具ABBYY FineReader的使用技巧. ...

  2. 采集post传输的数据

    采集数据,网页上的数据是开发者通过ajax的post方式显示的,就得用到curl以及它的跨域方法 代码: $post_data------post传过去的参数 $ch = curl_init(); $ ...

  3. 企业安全01-Apache solr XML实体注入漏洞CVE-2017-12629

    Apache solr XML 实体注入漏洞CVE-2017-12629 一.简介 Apache Solr 是一个开源的搜索服务器.Solr 使用 Java 语言开发,主要基于 HTTP 和 Apac ...

  4. 《STM32CubeMX配置STM32H743XI工程》第一讲《初始化UART,重定义printf函数,点亮一个LED灯》

    1.打开STM32CubeMX软件->新建一个工程(软件自行到ST官网下载安装) 2.输入对应的芯片型号(本次基于野火STM32H743XI Pro 开发板)点击Start Project生成项 ...

  5. LaTeX中的插图

    插图代码及注释: 显示效果: 更多命令可以看相关文档,通过在命令行终端输入 texdoc graphicx 命令打开文档.

  6. Happy Tree Friends——团队展示

    这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 团队名称 Happy Tree Friends 这个作业要求在哪里 团队作业第一次 这个作业的目标 团队合作 作业正文 正文 其 ...

  7. 口述完SpringMVC执行流程,面试官就让同事回家等消息了

    Srping MVC 执行流程真的是老生常谈的话题了,最近同事小刚出去面试,前面面试官相继问了几个 Spring 相关的问题,但当面试官问他,你知道 Srping MVC 的执行流程吗?小刚娴熟的巴拉 ...

  8. Mongo小结

    开启mongo的姿势: cd /usr/local/mongo/bin(mongo的文件目录的bin目录下) sudo ./mongod (开启mongo服务) 再新开一个终端 cd /usr/loc ...

  9. PyQt(Python+Qt)学习随笔:枚举类QTreeWidgetItem.ItemType、QListWidgetItem.ItemType的取值及含义

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 在Model/View的便利类QTreeWidget.QListWidgetItem中的项类型分别是 ...

  10. 第14.10节 Python中使用BeautifulSoup解析http报文:html标签相关属性的访问

    一. 引言 在<第14.8节 Python中使用BeautifulSoup加载HTML报文>中介绍使用BeautifulSoup的安装.导入和创建对象的过程,本节介绍导入后利用Beauti ...