blocks|key|4099561|text|如果所有操作失败，则在顶部(或期望滚动到位置)创建一些空的HTML元素(例如:+div)，在模板(或父模板)上使用id="+top“：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4099562|<div+id="top"></div>|code-block|syntax|javascript|4099563|在构成部分：|4099564|ngAfterViewInit()+{
++++//+Hack:+Scrolls+to+top+of+Page+after+page+view+initialized
++++let+top+=+document.getElementById('top');
++++if+(top+!==+null)+{
++++++top.scrollIntoView();
++++++top+=+null;
++++}
++}|4099565|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

If all fails, then create some empty HTML element (eg: div) at the top (or desired scroll to location) with id="top" on template (or parent template):

<pre><code>&lt;div id="top"&gt;&lt;/div&gt;
</code></pre>

And in component:

<pre><code>ngAfterViewInit() {
 // Hack: Scrolls to top of Page after page view initialized
 let top = document.getElementById('top');
 if (top !== null) {
 top.scrollIntoView();
 top = null;
 }
 }
</code></pre>

blocks|key|2860446|text|我假设您已经将scrollPositionRestoration选项添加到AppRoutingModule中，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2860447|...

@NgModule({
++imports:+[RouterModule.forRoot(routes,+{+scrollPositionRestoration:+'enabled'+})],
++exports:+[RouterModule],
})
export+class+AppRoutingModule+{}|code-block|syntax|javascript|2860448|如果样式表中有以下代码：|2860449|html,
body+{
++height:+100%25;
}|2860450|滚动到顶部的将崩溃！¡#$%25&*%2B@#!|offset|length|style|BOLD|2860451|您可以删除此属性，也可以将代码更改为：|2860452|html+{
++min-height:+100%25;
++display:+flex;
}
body+{
++min-height:+100%25;
++flex:+1;
}|2860453|注意！要小心地更改样式表，因为它会破坏其他东西.|2860454|entityMap^0|0|0|0|0|0|K|0|0|0|0|3|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|12|8|@$M|13|N|14|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|15|8|@]|9|@]|A|$]]|$1|S|3|T|5|D|7|16|8|@]|9|@]|A|$E|F]]|$1|U|3|V|5|6|7|17|8|@$M|18|N|19|O|P]]|9|@]|A|$]]|$1|W|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|X|$]]

I assume you have added the scrollPositionRestoration option in your AppRoutingModule like this:
<pre><code>...

@NgModule({
 imports: [RouterModule.forRoot(routes, { scrollPositionRestoration: 'enabled' })],
 exports: [RouterModule],
})
export class AppRoutingModule {}
</code></pre>
And if you have the following code in your stylesheet:
<pre><code>html,
body {
 height: 100%;
}
</code></pre>
Your scroll to the top will break! ¡#$%&amp;*+@#!
You can remove this property or perhaps change your code to:
<pre><code>html {
 min-height: 100%;
 display: flex;
}
body {
 min-height: 100%;
 flex: 1;
}
</code></pre>
Attention! Be carefull changing your stylesheet because it can break other things...

blocks|key|334246|text|使用ViewportScroller|type|unstyled|depth|inlineStyleRanges|entityRanges|data|334247|ts：|334248|import+{+ViewportScroller+}+from+'@angular/common';

constructor(private+viewportScroller:+ViewportScroller){
}

public+scrollTo(anchor:+string):+void+{+//+for+calling+to+anchors
++++this.viewportScroller.scrollToAnchor(anchor);
}

ngOnInit(){
++++this.viewportScroller.scrollToPosition([0,+0]);
}|code-block|syntax|javascript|334249|html：|334250|<div+id="srollingEl"></div>
<button+(click)="scrollTo('srollingEl')"></button>|334251|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Use ViewportScroller
ts:
<pre><code>import { ViewportScroller } from '@angular/common';

constructor(private viewportScroller: ViewportScroller){
}

public scrollTo(anchor: string): void { // for calling to anchors
 this.viewportScroller.scrollToAnchor(anchor);
}

ngOnInit(){
 this.viewportScroller.scrollToPosition([0, 0]);
}
</code></pre>
html:
<pre><code>&lt;div id=&quot;srollingEl&quot;&gt;&lt;/div&gt;
&lt;button (click)=&quot;scrollTo('srollingEl')&quot;&gt;&lt;/button&gt;
</code></pre>

blocks|key|2860474|text|html+{+
+height:+100%25;++++
}
body+{
+height:+100%25;
+overflow:+auto;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2860475|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>html { 
 height: 100%; 
}
body {
 height: 100%;
 overflow: auto;
}
</code></pre>

In my Angular 6 app when I scroll down a page and click the link at the bottom of the page, it does change the route and takes me the next page but it doesn't scroll to the top of the page. As a result, if the first page(PARENT) is lengthy and 2nd page(CHILD) has few contents, it gives an impression that the 2nd page lacks the contents. Since the contents are visible only if user scroll to the top of the page.

I tried with adding "scrollPositionRestoration" for child like,

<pre><code>@NgModule({
 imports: [RouterModule.forChild(routes, {
 scrollPositionRestoration: 'top'
 })],
 exports: [RouterModule]
})
</code></pre>

This gives me error as :

<pre><code>(property) scrollPositionRestoration: string
Expected 1 arguments, but got 2.
</code></pre>

How to Resolve this ? Any Idea to Scroll Top of the Page for Angular Child Component ?

scrollPositionRestoration adding for Angular Child Route

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

在我的角形6应用程序中，当我向下滚动一个页面并单击页面底部的链接时，它确实改变了路线，并带我进入下一页，但它没有滚动到页面的顶部。因此，如果第一页(父母)很长，第二页(子)内容很少，就会给人一种印象，认为第二页缺乏内容。因为只有当用户滚动到页面顶部时，内容才是可见的。我试着给孩子加"scrollPositionRest...

问角子路由的scrollPositionRestoration加法
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问角子路由的scrollPositionRestoration加法EN