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>
angular8 页面滚动到某一个特定位置的更多相关文章
- 页面滚动到指定class样式位置
var winTop =$(window).scrollTop(); var top = document.getElementsByClassName('is-danger')[0].getBoun ...
- 设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示;当页面滚动到起始位置时,头部div出现,底部div隐藏
设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示: 当页面滚动到起始位置时,头部div出现,底部div隐藏 前端代码: <! ...
- 【特效】页面滚动到相应位置运行css3动画
请到我的个人博客网站上浏览此文章,欢迎评论和建议. 文章链接:http://www.xiaoxianworld.com/archives/87 现在css3动画很常见了,实际项目中经常应用,特别是那种 ...
- 【HTML】网页中如何让DIV在网页滚动到特定位置时出现
用js或者jquery比较好实现.但你要知道,滚动到哪个特定位置,例如滚动到一个标题h3那显示这个div,那么可以用jquery算这个h3距离网页顶部的距离:$("h3").off ...
- H5小技巧之——巧用<a>标签锚链接(#锚点链接 #页面特定位置 #DOM定位 #hash路由中使用锚链接)
#作者:矩阵鱼--代码中游泳的咸鱼 前端开发中,常遇到定位到页面某特定位置的需求,JavaScript提供的el.scrollIntoView() 和 el.scrollIntoViewIfNeede ...
- AOS – 另外一个独特的页面滚动动画库(CSS3)
AOS 是一个用于在页面滚动的时候呈现元素动画的工具库,你可能会觉得它和 WOWJS 一样,的确他们效果是类似的.但是AOS是 CSS3 动画驱动的库,当你滚动页面的时候能让元素动起来,当页面滚回顶部 ...
- js-点击按钮页面滚动到顶部,底部,指定位置
之所以笔记一下这个,因为我在项目中经常用到. $('.scroll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, ...
- jQuery-点击按钮页面滚动到顶部,底部,指定位置
$('.scroll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); //页面滚动至顶部 $('. ...
- 微信小程序(13)--页面滚动到某个位置添加类效果
微信小程序页面滚动到某个位置添加类,盒子置顶效果. <!-- vh,是指CSS中相对长度单位,表示相对视口高度(Viewport Height),1vh = % * 视口高度 --> &l ...
随机推荐
- js 时间日期与时间戳之间转换
1 1.将时间(2017-08-10)转换时间戳 2 var startTime = '2017-08-10'; 3 var startdate = new Date(Date.parse(start ...
- 【linux】串口通讯工具-minicom简介+简单操作
目录 前言 简介 尝试运行 配置 minicom 运行 minicom minicom 其它操作 前言 windows 上有不少的串口通信工具了,今天介绍一个linux下的一个串口通信工具-minic ...
- Oracle表空间和他的数据文件
//以myspace为例 来源于Oracle 11g数据库应用简明教程 清华出版社 /*创建表空间*/ CREATE TABLESPACE myspace DATAFILE'E:\develop\or ...
- 解决YUM下Loaded plugins: fastestmirror Determining fastest mirrors 的错误问题
最近想再购买一台虚拟服务器做项目测试,之前在西部数码购买的已经过期了,在同事的推荐下去搬瓦工购买了一台服务器,听他介绍在这里购买服务器很便宜($19.99/年)而且还是国外的,看着相比之前的确实挺便宜 ...
- 01_Activity生命周期及传递数据
1. Activity的生命周期: 2. Activity启动另一个Activity,并传递数据: package com.example.activitydemo; import android.a ...
- 如何使用TradingView(TV)回测数字货币交易策略
更多精彩内容,欢迎关注公众号:数量技术宅.想要获取本期分享的完整策略代码,请加技术宅微信:sljsz01 TradingView平台简介 前段时间,有粉丝找到技术宅,表示他有一个常用的交易平台,叫做T ...
- Fiddler 4 断点调试(修改request请求参数)
1.选中要测试的链接 2然后点击规则的Automatic Breakpoints 的Before Requests 3.重新发送请求找到测试的点链接 最终效果如下
- SpringCloud 源码系列(3)—— 注册中心 Eureka(下)
十一.Eureka Server 集群 在实际的生产环境中,可能有几十个或者几百个的微服务实例,Eureka Server 承担了非常高的负载,而且为了保证注册中心高可用,一般都要部署成集群的,下面就 ...
- 老猿学5G扫盲贴:中国移动网络侧CHF的功能分解说明
☞ ░ 老猿Python博文目录░ 一.引言 在<老猿学5G扫盲贴:中国移动网络侧CHF主要功能及计费处理的主要过程>介绍了中国移动CHF的总体功能,同时说明了CHF网元主要由AGF.CD ...
- Python学习随笔:PyCharm的错误检测使用及调整配置减少错误数量
老猿使用PyCharm有将近一个月了,发现PyCharm并不能很好的完成语法检查,有时运行时突然终止,仔细核查却发现是基本的语法错误,不过有次无意中移动鼠标到代码最右边的边框时发现其实PyCharm有 ...