在Angular 2中单击按钮顶部


Go to Top of page on button click in Angular 2

想通过单击按钮返回页面顶部，当前我使用的以下代码不起作用：

HTML：

1
<button md-raised-button class="md-raised md-primary" (click)="onEdit()">Edit</button>

功能：

1
2
3
onEdit(){
    window.scrollTo(0,0);
  }
相关讨论

1
2
3
onEdit(){
    document.body.scrollTop = document.documentElement.scrollTop = 0;
  }
相关讨论

这是我的解决方案，部分基于w3schools的后退按钮示例。

html：

1
<button (click)="topFunction()" id="myBtn" title="Go to top">Top</button>

CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/*-----------------------------Button-------------------*/

#myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: red; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
}

#myBtn:hover {
    background-color: #555; /* Add a dark-grey background on hover */
}

typescript：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  @HostListener("window:scroll", []) onWindowScroll() {
    this.scrollFunction();
  }
  // When the user scrolls down 20px from the top of the document, show the button
scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("myBtn").style.display ="block";
    } else {
        document.getElementById("myBtn").style.display ="none";
    }
}

// When the user clicks on the button, scroll to the top of the document
topFunction() {
    document.body.scrollTop = 0; // For Safari
    document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}

希望它对任何人都有帮助

我尝试在下面的代码中正常工作：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { Inject } from '@angular/core';

@Component({
  ...
  providers: [
      { provide: Window, useValue: window }  
  ],
...
})
export class ProgressComponent implements OnInit {
constructor(
    @Inject(Window) private window: Window,
  ) { }

onEdit(){
    this.window.document.getElementById('editSection').scrollIntoView();
  }
}

正确的方法是使用DOCUMENT DI令牌

导入

1
2
import { Component, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

注入文档

1
2
constructor(@Inject(DOCUMENT) private dom: Document) {
}

然后您可以致电

1
2
  this.dom.body.scrollTop =0;
  this.dom.documentElement.scrollTop=0;

这也适用于SSR(通用angular)

我正在使用angular6(这也适用于angular2)。这是我的示例代码。
sample.component.html

1
2
3
4
5
6
7
8
    <button type="button" class="btn btn-primary btn-sm" (click)="gotoSection()">Go to Section</button>
    <!-- content -->


    <!-- any content -->


    <!-- any content -->

sample.component.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

@Component({
    selector: 'app-sample',
    templateUrl: './sample.component.html'
})

export class Sample {
    @ViewChild('sectionNeedToScroll') sectionNeedToScroll: ElementRef

    constructor() { }

    public gotoSection() {
        //this will provide smooth animation for the scroll
        this.sectionNeedToScroll.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'center' })
    }
}

只需单击按钮即可使用

1
document.body.scrollTop = 0;

ngx-scrolltop区块上的新孩子

1
ng add ngx-scrolltop

解决此问题的小型Angular库：https://github.com/bartholomej/ngx-scrolltop

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!--Scroll to top-->

  <button (click)="scrollToTop()">
      <i class="fa fa-chevron-up">
  </button>




import { Component, OnInit, Inject, HostListener } from '@angular/core';
import { DOCUMENT } from"@angular/platform-browser";
@Component({
    selector: 'app-scroll-top',
    templateUrl: './scroll-top.component.html',
    styleUrls: ['./scroll-top.component.css']
})
export class ScrollTopComponent implements OnInit {
    windowScrolled: boolean;
    constructor(@Inject(DOCUMENT) private document: Document) {}
    @HostListener("window:scroll", [])
    onWindowScroll() {
        if (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop > 100) {
            this.windowScrolled = true;
        }
       else if (this.windowScrolled && window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop < 10) {
            this.windowScrolled = false;
        }
    }
    scrollToTop() {
        (function smoothscroll() {
            var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
            if (currentScroll > 0) {
                window.requestAnimationFrame(smoothscroll);
                window.scrollTo(0, currentScroll - (currentScroll / 8));
            }enter code here
        })();
    }
    ngOnInit() {}
}

为顶部元素分配一个ID。
例子

1
   <h1 id="top">TOP HERE

在您的功能中：

1
2
3
backToTop() {
   document.getElementById('top').scrollIntoView();
}

在您的按钮中：

1
<button (click)="backToTop()">Back to top</button>

您可以使用以下代码：

angular

1
<button md-raised-button class="md-raised md-primary" onclick="onEdit()">Edit</button> // button onclick

JS：

1
2
3
function onEdit() { // function onEdit
window.scrollTo(0, 0); // very top
}
相关讨论