Question

想要点击按钮点击页面顶部，目前我使用的代码无效：

HTML：

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

功能：

onEdit(){
    window.scrollTo(0,0);
  }

Answer 1

onEdit(){
    document.body.scrollTop = document.documentElement.scrollTop = 0;
  }

Answer 2

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

html：

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

CSS：

/*-----------------------------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 */
}

打字稿：

  @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
}

希望它对任何人都有帮助

Answer 3

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

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();
  }
}

Answer 4

只需点击按钮

即可使用

document.body.scrollTop = 0;

Answer 5

我正在使用角度6（这也适用于角度2）。这是我的示例代码。 sample.component.html

<div class="container-fluid row mx-auto px-2 my-2">
    <button type="button" class="btn btn-primary btn-sm" (click)="gotoSection()">Go to Section</button>
    <!-- content -->
</div>
<div class="container-fluid row mx-auto px-2 my-2">
    <!-- any content -->
</div>
<div class="container-fluid row mx-auto px-2 my-2"  #sectionNeedToScroll>
    <!-- any content -->
</div>

sample.component.ts

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' })
    }
}

Answer 6

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

导入

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

注入文档

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

然后您可以致电

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

这在SSR（Angular Universal）中也适用

Answer 7

ngx-scrolltop

上的新孩子

ng add ngx-scrolltop

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

Answer 8

您可以使用以下代码：

角度

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

JS：

function onEdit() { // function onEdit
window.scrollTo(0, 0); // very top
}

Answer 9

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

<div class="container">
   <h1 id="top">TOP HERE</h1>
</div>

在您的职能中：

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

在您的按钮中：

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

Answer 10

<!--Scroll to top-->
<div class="scroll-to-top" [ngClass]="{'show-scrollTop': windowScrolled}">
  <button (click)="scrollToTop()">
      <i class="fa fa-chevron-up"></i>
  </button>
</div>



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() {}
}

转到Angular 2中按钮单击的页面顶部

10 个答案: