在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