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 ...
随机推荐
- 带你了解Boom 3D的Mac版音效模式
音乐是很好的情绪抒发途径,因为音乐蕴含了很多信息,包含了很多情感,所以我们聆听不同种类的音乐的时候会产生不同的心理感受.这就是音乐的魅力,可以让人产生共鸣引发无数的思绪.为了能够更好的体会感受音乐可以 ...
- 解决Jenkins可安装界面是空白的小技巧
打开后这里面最底下有个[升级站点],把其中的链接改成http的就好了,http://updates.jenkins.io/update-center.json. 然后在服务列表中关闭jenkins,再 ...
- 【PYTHON】操作excel笔记
import xlrd book = xlrd.open_workbook('..//data//case1.xls') # 获取excel对象 print(book.sheets()) # 获取ex ...
- mongodb查询前10条
mongo可以通过时间或者通过id来判断上一条记录或者下一条记录,我是通过id 前10条 db.数据库名称.find({ '_id': { '$lt': ids } }).sort({_id: -1} ...
- Jmeter生成HTML测试报告
jmeter轻便小巧,运行速度快,但是缺少直观的可视化测试报告,并且生成测试报告操作稍微有点麻烦. GUI界面没有生成测试报告的功能,只能使用命令行生成测试报告.这里需要提到一个jtl的文件,它是生成 ...
- L-Rui
<!DOCTYPE html> <head> <meta charset="UTF-8"> <link rel="shortcu ...
- LaTeX的字体字号设置
字体属性: 字体族代码及注释: 显示效果: 字体系列设置及字体形状设置代码及注释: 显示效果: 字体大小及中文字号的设置代码及注释: 显示效果: ctex文档有关中文字号的排版: ctex文档的打开方 ...
- 【MMT】ICLR 2020: MMT(Mutual Mean-Teaching)方法,无监督域适应在Person Re-ID上性能再创新高
原文链接 小样本学习与智能前沿 . 在这个公众号后台回复"200708",即可获得课件电子资源. 为了减轻噪音伪标签的影响,文章提出了一种无监督的MMT(Mutual Mean-T ...
- Centos7配置阿里epel源|yum源
这一步非常重要.重要.重要.在这解释一下源的概念,打个比方如果手机想获取一个软件,可以选择很多途径,如华为的华为商店,小米的应用商店,苹果的App store,源就相当于各种手机获取软件的商店.因为国 ...
- Java读书计划和分享
写在前面 为什么要写这些呢? 接触java已经有三年多了,感触颇多,比如从0到60,只要勤实践.勤思考,很快就可以入门,从60分到满分极致,则单单不是凭借工作年限或者什么就可以.曾经也有过一段迷茫时期 ...