在Angular材质5中创建滚动到顶部按钮
，可以通过以下步骤来完成：
- 首先，确保已经安装了Angular Material库。如果没有安装，可以使用以下命令进行安装：
- 首先，确保已经安装了Angular Material库。如果没有安装，可以使用以下命令进行安装：
- 在组件的HTML模板文件中，添加一个按钮元素，用于触发滚动到顶部的功能。例如：
- 在组件的HTML模板文件中，添加一个按钮元素，用于触发滚动到顶部的功能。例如：
- 上述代码中，使用了Angular Material的mat-fab样式和mat-icon组件，来创建一个漂浮按钮，并使用了一个向上箭头图标作为按钮的内容。
- 在组件的TypeScript文件中，定义一个名为scrollToTop的方法，用于实现滚动到顶部的逻辑。例如：
- 在组件的TypeScript文件中，定义一个名为scrollToTop的方法，用于实现滚动到顶部的逻辑。例如：
- 上述代码中，使用了HostListener装饰器来监听窗口的滚动事件，并在滚动时执行相应的逻辑。在scrollToTop方法中，使用window.scrollTo方法将页面滚动到顶部，并且可以通过指定behavior为'smooth'来实现平滑滚动的效果。
- 最后，在组件的CSS文件中，可以添加一些样式来美化滚动到顶部按钮的外观。例如：
- 最后，在组件的CSS文件中，可以添加一些样式来美化滚动到顶部按钮的外观。例如：
- 上述代码中，将按钮定位在页面的右下角。
通过以上步骤，我们就可以在Angular材质5中创建一个滚动到顶部的按钮了。这个按钮可以方便用户快速返回页面顶部，提升用户体验。
相关·内容
2回答
我在我的angular 10项目中使用了angular材质10.2.5。我通过添加下面这一行来包含主题
@import '@angular/material/prebuilt-themes/deeppurple-amber.css';
在我的style.css中，我创建了一个组件，并使用了一个原色的材质按钮，但我的按钮颜色并未应用。
<button mat-button color="primary">Toogle</button>
按钮颜色必须为蓝色
有什么想法吗？
浏览 0提问于2020-10-27得票数 0
1回答
所以目前，我使用angular材质和它的默认滚动条(但我认为它是完美的滚动条)来作为我的滚动条的滚动设计。但是，只有当用户尝试滚动页面/div时，才会显示滚动。我试图读取角度材质的滚动api，但这里没有我可以使用的属性。当然，我已经把overflow-y: scroll放在css上了。有什么想法吗？谢谢!
浏览 17提问于2019-02-13得票数 7
回答已采纳
我添加了角度材料MatDialog来显示模型窗口，它接受来自用户的表单数据。 我在app.scsss文件中添加了这个 @import '~@angular/material/prebuilt-themes/indigo-pink.css'; 现在，当单击按钮时，模型将打开，但在每个组件的应用程序中，整个窗口都没有更多的滚动可用。 我认为每当我在现有的应用程序中添加任何角度材质组件，它停止滚动时，就会发生这种情况。 谢谢。
浏览 16提问于2020-11-04得票数 0
想象一下，你想要优化一个网页上的资源加载过程，该网页由许多类似carrousel的视图和丰富的图像和媒体资源组成的长滚动内容组成。
我正在使用angular (AngularJs，而不是Angular 2)实现一个类似Netflix的画廊。我有我的自定义指令(在angular中，你应该使用指令方法来声明自定义元素和属性)，它工作得很好，但现在我想使用一种类似于Android上的角度材质或视图适配器的虚拟中继器的技术。
我可以使用代码来计算位置和元素来检测屏幕上的内容，但我真的想要一种更直接的方法。像事件监听器之类的东西。一些我可以普遍使用的东西。
浏览 15提问于2017-03-12得票数 0
回答已采纳
2回答
从右到左方向的角度材质表
、、、
我使用的是angular material 7.1.1版本。我有一个带有水平滚动和粘性列的表格。
它工作得很好，但是当我尝试将方向改为从右到左显示(我的表数据显示希伯来语文本，所以它必须是rtl)时，行为真的很奇怪。
我创建了一个在stackblitz中展示它的例子：
浏览 18提问于2018-12-13得票数 1
回答已采纳
我有一个Material模块，它包含角度材质组件的导入/导出。
import { NgModule } from '@angular/core';
import {
MdToolbarModule,
MdIconModule,
MdSidenavModule,
} from '@angular/material';
@NgModule({
imports: [
MdToolbarModule,
MdIconModule,
MdSidenavModule,
],
exports: [
MdToolbarM
浏览 4提问于2018-05-18得票数 1
<button mat-icon-button>
<mat-icon>keyboard_arrow_up</mat-icon>
</button> 如何在angular material 5中创建滚动到顶部按钮？
浏览 19提问于2019-02-25得票数 2
回答已采纳
1回答
如何创建角度材质组件形状的主题？
、、、、
有没有办法在angular材质中创建组件形状的主题？我知道material设计有一个形状概念，允许你为所有的小/中/大组件创建更多的圆角，较少的圆角，甚至是切角。有没有办法在angular材质中实现这一点？
如果不是，那么在angular材质中全局定制组件的最佳方式是什么？假设我想去掉所有<mat-button>上的圆角？
浏览 17提问于2019-07-15得票数 5
回答已采纳
我是angularjs材料设计的新手，我希望在我的前端实现它丰富的UI功能。在创建的模板中，VS13附带安装了引导程序。我是否可以将angularjs的材质设计与bootstrap或自定义bootstrap结合起来，为我提供材质设计、外观和动画？
我创建了新项目并安装了angularjs material design，并将其添加到App_Start文件夹下的BondleConfig.vb中
bundles.Add(New ScriptBundle("~/bundles/angular").Include(
"~/bundles/
浏览 0提问于2015-07-04得票数 5
我当前使用的是angular 10，我想路由到两个不同的视图，然后出现了这个错误。我想要实现的是，每当我单击某个特定按钮时，它都会显示视图。我为视图创建了两个不同的组件。 core.js:4196 ERROR TypeError: Cannot read property 'viewContainer' of undefined
at MatTable._forceRenderHeaderRows (table.js:1637)
at MatTable.ngAfterContentChecked (table.js:1228)
at callHook
浏览 29提问于2020-07-28得票数 1
我正在尝试实现以下场景。我有一个带有输入控件的表单。一个元素是一个formarray数组。这个few数组有很少的输入控件。“添加”按钮来创建此窗体数组。当单击Add按钮时，应该会出现一个新的弹出窗口或模式来填充值。是否可以使用ngx bootstrap或angular材质，或者使用ngtemplateOutlet或ngcontainer。Advice please.Is可以将整个提交收集到一个模型中。
浏览 13提问于2019-12-07得票数 1
我的应用程序中有angular材质对话框，但与angular material网站上的示例不同，这些对话框不会在屏幕中心渲染，更大的问题是它们允许背景滚动。这意味着用户可以在背景上滚动，并且对话框有时会从可视窗口消失。 我在ScrollStrategy上见过很多例子，但这些例子都不起作用。这种行为难道不应该“只起作用”吗？
浏览 33提问于2020-11-02得票数 0
回答已采纳
我已经尝试将Angular材质添加到Visual Studio 2017中的spa模板中。我添加了Angular材质指南中描述的Angular包。然后，我将以下包添加到webpack.config.vendor.js
'@angular/material',
'@angular/material/prebuilt-themes/deeppurple-amber.css',
之后，我运行了以下命令：webpack --config webpack.config.vendor.js。
下一步，我将模块添加到app.module.browser.ts，如下图所示。
浏览 1提问于2017-10-06得票数 2
2回答
我使用在向下滚动时隐藏标题，并在向上滚动时使标题部分再次可见。标题部分包含我的徽标和导航按钮。
而在我的页面顶部，我需要我的导航按钮是较深的颜色，因为我的背景颜色是较浅的，而当向下滚动时，我需要我的导航按钮是较浅的颜色，因为标题背景颜色较深。
我在CSS中创建了colors类来更改按钮的颜色。
CSS：
.topColor {color: red;}
.scrollColor {color: white;}
我在这个项目中使用了angularjs，所以我使用了headroom.js angular模块和下面的选项。
角度：
<headroom id="header" t
浏览 1提问于2015-04-03得票数 0
1回答
我正在尝试导入熔丝模型到搅拌机和从搅拌机到unity。我不知道如何应用纹理(如果需要)。所有的教程似乎都使用不同版本的搅拌器。那么如何在blender中应用或加载纹理呢？
浏览 43提问于2020-05-21得票数 0
回答已采纳
3回答
我有一个对话框组件，里面有两个垫子按钮，但是由于某种原因，垫子按钮样式不适用。按钮样式可以在其他组件中使用，但我不确定为什么它不适用于这个对话框组件。
<button mat-raised-button color = "primary"(click)="onNoClick()" style="margin-left:100px;">No, I'm still working.</button>
<button mat-raised-button color = "primary
浏览 2提问于2020-04-15得票数 1
首先，我已经阅读了angular (angular.io)的整个教程。我理解延迟加载的概念。但根据如何处理一些问题，我还有一些进一步的问题。第一个是为什么我不能在我通过惰性加载加载的组件中使用角度材料？
因此，根据我的理解，我在app.module.ts中导入包(例如Angular材质)：
import { MaterialAppModule } from './shared/materials.module';
@NgModule({
imports: [
MaterialAppModule //own Module which keeps all Mat
浏览 0提问于2018-04-19得票数 0
1回答
如何使用hammerjs在angular材质中实现drag-down触发事件？ 就像下面的灰色条上的facebook按钮，拖拽事件需要完成。 ?
浏览 14提问于2020-01-17得票数 0
在我的应用程序中我有一些控件，比如复选框，菜单按钮等等。现在我想使用Angular 2的ng-material设计。那么我应该遵循什么步骤来实现Angular 2的材质呢？
浏览 1提问于2016-10-20得票数 0
1回答
我有一个UIScrollView，里面有几个按钮。滚动视图底部的按钮是可见的，但按下它们时没有反应。我的问题似乎与中的问题相同，但公认的答案似乎不能解决我的问题；滚动视图的框架、滚动视图的contentSize以及滚动视图内部的视图框架(也是有问题的按钮的superview )都有宽414pt和高900pt。这绝对应该足够大，以包含没有响应的按钮。
编辑:我在界面生成器中创建了滚动视图。滚动视图内的容器视图的边缘被固定到滚动视图的边缘。
我尝试添加以下几行代码：
scrolling.frame = CGRect(x: 0, y: 0, width: 414, height: 900)
浏览 17提问于2016-08-16得票数 0
回答已采纳
1回答
我有菜单，我有4个项目，比如1,2,3,4。
我想重定向用户点击项目1和2相同的页面，但用户应该看到页面的不同部分(向下滚动到页面)，这个页面也是应用程序的着陆页，所以当用户登录然后s/他应该是页面顶部，也就是说，在那时他们不应该滚动到1或2的特定部分。
当用户点击项目1时，用户应该向下滚动到一个部分，如果点击3，他/她应该重定向到另一个页面(我可以管理)。
我使用的是angular5的角度材质。
你能帮我解决这个吗？
浏览 0提问于2018-06-03得票数 0
我正在尝试添加材料设计到jhipster生成的网关。尽管它似乎在工作，但我在控制台上得到了这个警告；
Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: https://material.angular.io/guide/theming
Could not find HammerJS. Certain Angular Material components may not w
浏览 1提问于2017-07-04得票数 2
我已经使用angular材质和angular flex布局创建了一个angular应用程序。这个应用程序的问题是，每当我在chrome中按下Ctrl +P时，导航栏中的所有菜单都消失了，本应只在移动设备中出现的菜单按钮出现了，最重要的是，整个应用程序变得无法使用。我必须刷新浏览器才能使应用程序可重用。我从angular flex布局的github问题页面上读到，当打印对话框出现时，UI线程被中断，这就是问题的原因。是否有解决此问题的方法。 我已经为相同的'angular-responsive-navbar‘创建了一个git repo，这样任何人都可以重现这个问题。
浏览 16提问于2020-03-31得票数 4
1回答
使用CDK自动调整虚拟滚动大小策略保持滚动位置 我有一个很大的项目列表，可以使用@angular/cdk-experimental提供的<cdk-virtual-scroll-viewport autosize>进行滚动(这些项目具有动态高度，因此我使用这种滚动策略而不是FixedSizeVirtualScrollStrategy)。 随着时间的推移，新的项目被插入到列表中，即它们被附加在顶部。当用户向下滚动时，我希望避免新项目将视区中的项目推开。因此，我需要一个机制来维护/恢复滚动位置后，已添加的项目。 我有一个半工作的解决方案(很麻烦，因为它读取私有字段)，但在添加项目后，视
浏览 82提问于2020-11-03得票数 7
回答已采纳
我使用的是angular 5，cli版本是1.5.2，我面临着路由问题。
当从一条路线导航到另一条路线，然后向下滚动一点并导航回上一条路线时，页面将保持在相同的滚动位置。当前，从一个视图导航到另一个视图，然后向下滚动一点，然后导航回上一个视图。页面保持在相同的滚动位置。
但我需要页面滚动到顶部时，从一个路线导航到另一个。
另外，我需要知道这是否是angular中的默认路由行为？
浏览 1提问于2018-01-03得票数 2
我已经使用HTML5和CSS创建了一个基本的html模板。我想把它集成到wordpress中。我该怎么做？我是wordpress的新手。我还可以集成一个用angular材质创建的模板吗？
浏览 1提问于2017-03-29得票数 0
我最近第一次接触了Three.js，我需要一些帮助来做一些测试。 目前，我正在尝试创建一个AR应用程序，其中使用手机的摄像头将对象插入到真实环境中。最初，对象在屏幕上以蓝色显示，但是在顶部我想放置三个按钮，三种不同的颜色，例如蓝色，红色和绿色，当触摸其中一个按钮时，对象只是改变它的颜色。 我在Blender上创建了对象及其材质。对象的一个面具有具有UV纹理的材质，对象的其余部分具有第二种材质，没有纹理，仅具有初始节点的材质(在搅拌器循环中创建)。所以我已经创建了6个材质，3个用于纹理，每个材质一个，还有3个用于颜色，每个材质也是一个。在搅拌机上，我将这个对象导出为带有材质和纹理的.glb。
浏览 33提问于2021-04-24得票数 0
回答已采纳
2回答
Xcode 7垂直滚动视图问题
、、、、
在Xcode 7.3中，我很难创建一个垂直的滚动视图。我已经学习了几个关于SO和其他地方的教程，但是由于某种原因，我的最上面视图的宽度似乎超出了屏幕，或者移到了左边。滚动视图仅限于垂直滚动，这是我的意图，但内容显示部分离开屏幕。
我尝试水平中心按钮和引脚到内容视图的顶部和底部。在模拟器上，它们在左边的屏幕上显示出一半，但在故事板中显示得很好，没有任何约束问题。我甚至在助理编辑器中预览了3.5英寸、4英寸和4.7英寸的屏幕，看上去就像我预期的那样。但是当我在模拟器上运行它的时候，它就乱套了。另外，Content的背景应该是白色的(为了测试目的)，但它显示的是最上面视图的灰色颜色。
这是我和我的约
浏览 7提问于2016-05-06得票数 2
回答已采纳
我在开发一个Angular v6项目(基于 starter)时使用的是Visual Studio Code，其中包含Angular材质模块。
项目可以正常编译和运行，但在编辑器中，无法识别角度材质组件：
我猜识别的问题是因为material模块没有直接导入到模块中，而是导入了导入材料的“共享”模块，但可能我遗漏了一些东西。
任何帮助我们都将不胜感激。
浏览 1提问于2018-04-26得票数 0
我想使用Angular材质的组件，同时利用Materialize CSS的实用工具(文本颜色，排版，按钮...)。然而，看起来这两个库不能同时工作。如果我尝试包含角度材料和物化(只有css文件)，样式看起来是坏的。
考虑到这一点，即使是每个库所需的HTML也是不同的(当然，我说的是最终编译的html )。有谁知道如何克服这个问题吗？我使用的是Angular v4.0，最新的angular-cli，最新的angular-material和物化最新版本。
谢谢!
浏览 3提问于2017-04-03得票数 0
我使用的材料-Ui，然而，当我向下滚动页面，应用程序去下面的地址栏在iOS 10。而且地址栏也保持打开而不是折叠。我使用的是默认的材质UI主题。
我不认为它是这样工作的。有例子说明如何正确地做到这一点吗？
理想情况下，如果AppBar被固定在页面的顶部，那就太好了。
谢谢。
浏览 1提问于2016-11-16得票数 0
回答已采纳
2回答
想知道是否有某种方式来测试滚动量，在一定范围内使用Cypress.io。
更确切地说是
从页面顶部开始，按下按钮
页面向下滚动到一定高度
测试滚动高度在一定范围内是否正确
我的尝试:我认为最好的方法是测试一个当前的div不在手机屏幕的可视区域。然后向下滚动，这样就可以看到了。
cy.get('#angular-projects').should('not.be.visible') // div #angular-projects
cy.get('#developer-projects').click() // button
浏览 0提问于2018-04-24得票数 11
回答已采纳
2回答
如何将此函数放置到当单击按钮时，它应该滚动到视图的顶部，并刷新回收视图布局(如拉刷新，但单击)，可以吗？
比如，当我们浏览应用程序/网站时，我们向下滚动并点击一个按钮，然后返回到页面的顶部(向上滚动)。但我想这样做，也是当按钮被点击，做一个布局刷新的回收视图。
如果不可能，那么返回到顶级函数的将被高度接受，我很感谢您的帮助。
就像红色圆圈中的这个：--如果你不知道，推特有这样的功能--当点击鸟图标时，它将页面向上滚动到顶部。
我使用一个调用片段(fragment_home)来显示recyclerView，但是我想要调用的操作按钮在我的FeedActivity.class中，那么，我如
浏览 4提问于2021-07-29得票数 0
2回答
我有一个垂直滚动的ScrollView。ScrollView的原因是，当方向改变为景观时，我的所有按钮都会被安装。
有两个问题可能是相关的：
当在纵向(不需要滚动)时，视图仍然希望滚动。
在景观中，它在底部留下太多的滚动空间。
制约因素：
ScrollView -尾随/引导空间到superView，底部空间到label2，顶层空间到label1
ContentView -尾随/引导/底部/顶部空间到superView，宽度等于mainView
Label1 -对齐中心X，顶部空间到superView (60)，底部空间到scrollView
Label2 -对齐
浏览 0提问于2018-05-09得票数 0
回答已采纳
1回答
我有个问题。我需要使用angular材质创建一个动态多级菜单，数据源如下所示 [
{
"name": "Frontend",
"children": [
{
"name": "HTML"
},
{
"name": "Angular"
},
{
浏览 29提问于2020-03-25得票数 0
1回答
我有问题的材料主题加载它的一些功能。
我似乎找不到问题的根源，我已经多次阅读material.angular.io上的“入门指南”，使用命令行界面命令来更新我的项目。
html：
<button mat-raised-button color="primary" buttonType="submit"
[disabled]="inquiryForm.invalid || inquiryForm.pristine">
<mat-icon>library_add</mat-icon>
浏览 6提问于2019-07-05得票数 0
回答已采纳
3回答
你好啊！
我需要用Angular 2+创建一个有这么多记录的表。为此，我尝试了虚拟滚动。尽管如此，我仍然找不到任何处于工作状态的文档或示例。
请帮助我开始使用Angular 2+虚拟卷轴。
浏览 3提问于2017-02-20得票数 3
3回答
在我的angular应用程序中，我有两个相邻的材质按钮。我想在它们之间添加一点填充。但当我将add padding-right添加到左侧按钮时，我的结果是：
| button || button |
要这样做：
| button || button |
但我想要的是：
| button | | button |
浏览 1提问于2019-06-25得票数 2
1回答
我将angular material升级到6.0.2，我想使用badge功能，但它没有显示在我的页面中。包配置如下所示：
{
"name": "my.angular",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
浏览 0提问于2018-05-19得票数 10
回答已采纳
1回答
如何创建多级菜单angular 2材质类似 (angular js)
<md-button ng-click="$mdOpenMenu()">Link1</md-button>
浏览 0提问于2017-06-11得票数 0
我使用的是Angular 6和Angular材质。当我点击编辑按钮时，次要、SSC和Male值将在select上初始化。但是我不能这样做。单击编辑按钮后，我只能在下拉列表中显示男性值。因此，我希望在下拉列表中显示所有值，并传递动态选择的对象。谢谢。
我的代码链接在这里：
浏览 1提问于2018-07-02得票数 4
回答已采纳
正如所说的那样，不可能同时使用浮动标签和angular材质的默认清除按钮功能。那么，通过使用指令来实现这种行为的干净方法是什么呢？
浏览 0提问于2016-05-02得票数 0
1回答
离子v5卷轴到顶部
、、、
Current environment:
Ionic CLI : 6.7.0
Ionic Framework : @ionic/angular 5.1.0
@angular-devkit/build-angular : 0.803.26
@angular-devkit/schematics : 8.3.26
@angular/cli : 8.3.26
@ionic/angular-toolkit : 2.2.0
关于离子v5的
浏览 1提问于2020-05-20得票数 2
回答已采纳
3回答
我正在使用angular6来布局我的UI。
默认的垫-滑-切换按钮如下所示：
但是我想让切换按钮看起来像下面的材质图标toggle_on，toggle_off。
可以定制吗？
非常感谢。
浏览 1提问于2018-07-25得票数 2
回答已采纳
我正在为此构建一个angular5应用程序，我需要angular材质，哪个版本的angular材质与angular 5应用程序兼容，以及如何安装它。
浏览 2提问于2018-05-30得票数 9
回答已采纳
Angular材质对话框在我的Chrome机器上停止工作。他们也停止了在网络上的工作，所以这不是一个编码问题。 任何使用角度材质对话框的站点都只显示一个空的透明灰色覆盖，而不是显示一个对话框。在Edge下，对话框仍然可以正常工作。他们上个星期工作得很好。 我已经重启了几次，更新了系统上的所有东西，重新安装了Chrome，关闭了图形加速，删除了所有Chrome扩展，清除了缓存，检查了内存使用情况，并查看了系统日志中的错误。 https://material.angular.io/components/dialog/examples 当我浏览到这个网站并点击"Pick One“按钮时，我
浏览 11提问于2019-08-27得票数 0
我希望有这个小按钮，当您单击它时，会添加一个新的表行，并使用jQuery平滑地滚动到新添加的行。
我在这里创建了一个示例，
请注意，这是我的代码的简化版本。真正的行允许在表中的任何位置添加行(不必在最后一行)，所以不要简单地告诉我，我总是可以滚动到底部。
但是即使只是滚动到底部，代码也不起作用。它适用于我假设的前10行，但是如果添加了更多的行，则位置/偏移量(我已经尝试过两者)似乎不正确。
要测试它，只需添加超过15行，您就会看到结果。
我注意到，如果您每次单击按钮后将滚动条移动到顶部，它似乎会以某种方式工作。
谢谢
浏览 4提问于2012-10-05得票数 0
回答已采纳
我从网上安装了一个3d模型。我将它添加到unity scene.But中，并尝试转换透明模型。为此，我创建了一个材质并在检查器面板中更改通道(RGBA)。
顺便说一句，我生成了一个透明的材质。我将其拖动到模型游戏对象中。现在，模型是透明的，但它不包括rgb数据。
如何使用rgb数据将模型转换为透明模型？
浏览 8提问于2016-02-04得票数 0
我使用的是angular 2材质的一个主题。我能够使用主题颜色的材料组件，如按钮，工具栏使用color=“主要”。但我不知道如何为div创建主题。我不想在.css文件中硬编码散列，因为如果我决定更改主题，它将需要在所有地方进行更改。我是不是遗漏了什么？做这件事最好的方法是什么？
浏览 0提问于2017-05-06得票数 15
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
