在Angular4应用中使用CSS设置滚动条顶部

Question

在我的Angular4应用中，当我向下滚动某个列表并单击某个列表项目以查看其他路由上的详细信息时，需要向上滚动以转到顶部页。

我找到了一些答案，使用JQuery设置滚动到顶部。但是，是否可以使用CSS（SASS可能）将滚动条设置为顶部？

Answer 1

这里是仅使用基于css的平滑滚动的快速示例。这是另一个SO thread与更多的答案。

希望这会有所帮助。

html { 
 
    scroll-behavior: smooth 
 
} 
 

 
a { 
 
    display: block; 
 
    background: #fff; 
 
    padding: 4px; 
 
} 
 

 
div { 
 
    height: 1000px; 
 
    width: 200px; 
 
    padding: 4px; 
 
} 
 

 
#red { 
 
    background: red; 
 
} 
 

 
#blue { 
 
    background: blue; 
 
} 
 

 
#green { 
 
    background: green; 
 
} 
 

 
#yellow { 
 
    background: yellow; 
 
}

<a name="top"></a> 
 

 
<a href="#red">Red</a> 
 
<a href="#blue">Blue</a> 
 
<a href="#green">Green</a> 
 
<a href="#yellow">Yellow</a> 
 

 
<div id="red"><a href="#top">Top</a></div> 
 
<div id="blue"><a href="#top">Top</a></div> 
 
<div id="green"><a href="#top">Top</a></div> 
 
<div id="yellow"><a href="#top">Top</a></div>

Answer 2

试试这个，没有任何CSS。在您的应用程序组件（引导）认购路由器，检查事件是NavigationEnd的实例，然后scoll窗口顶部

import {Component, ElementRef, Inject} from '@angular/core'; 
import {NavigationEnd, Router} from '@angular/router'; 


@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 

export class AppComponent { 
elementRef: ElementRef; 

constructor(@Inject(ElementRef) elementRef: ElementRef, 
      private router: Router) { 
this.elementRef = elementRef; 
router.events.subscribe((myEvent) => { 
    if (myEvent instanceof NavigationEnd) { 
    window.scrollTo(0, 0); 
    } 
}); 
} 
} 

这里工作plunker：https://plnkr.co/edit/IyO1Cp?p=preview