Die scrollTo-Funktion in AngularJs

  2. How-To's
  3. Angular Howtos
  4. Die scrollTo-Funktion in AngularJs
Oluwafisayo Oluwatayo 15 Februar 2024
Angular Angular Function
  1. Die scrollTo-Funktion mit ElementById in AngularJs
  2. ScrollTop-Funktion Mit ng-scrolltop in AngularJs
  3. ScrollTop-Button mit Bootstrap in AngularJs
  4. Abschluss
Die scrollTo-Funktion in AngularJs

Die Funktion scrollTo wird verwendet, um auf einer langen Webseite nach oben zu scrollen, und wir können sie auch verwenden, um zu einem bestimmten Abschnitt einer Webseite zu navigieren.

Sehen wir uns nun Möglichkeiten an, dies in Angular zu tun.

Die scrollTo-Funktion mit ElementById in AngularJs

In diesem Beispiel möchten wir eine Funktion erstellen, die uns zu einem bestimmten Seitenabschnitt führt. Wir werden dies tun, indem wir die Funktion ElementById verwenden, wenn also auf die Schaltfläche geklickt wird, bringt uns die Funktion zu dem Abschnitt der Seite, wo das Element definiert ist.

Wir beginnen mit der Erstellung eines Projektordners. Als nächstes navigieren wir durch die Datei app.component.html, um die Projektstruktur mit diesen Codes zu erstellen.

Codeausschnitt - app.component.html:

<button (click)="scrollToElement(target)">Scroll to Element</button>
<router-outlet></router-outlet>
<div id="elId" #target>Your target</div>

Was wir hier getan haben, ist, eine Webseitenstruktur zu erstellen, die Schaltfläche, auf die wir klicken werden, um die Funktion scrollTo zu aktivieren. Sie werden sehen, dass wir "Your target" in einem div mit einer id definiert haben.

Wir müssen eine Funktion so erstellen, dass wir beim Klicken auf die Schaltfläche "Scroll to Element" zu "Your target" gelangen. Wir erstellen eine Servicedatei, die diese Funktion übernimmt, und benennen die Datei scroll.service.ts.

Codeschnipsel - scroll.service.ts:

import { Injectable } from "@angular/core";
import { Router } from "@angular/router";

@Injectable({
  providedIn: "root"
})
export class ScrollService {
  constructor(private router: Router) {}
  scrollToElementById(id: string) {
    const element = this.__getElementById(id);
    this.scrollToElement(element);
  }
  private __getElementById(id: string): HTMLElement {
    console.log("element id : ", id);
    const element = document.getElementById(id)!;
    return element;
  }
  scrollToElement(element: HTMLElement) {
    element.scrollIntoView({ behavior: "smooth" });
  }
}

Wir haben die Funktion scrollToElementById erstellt und die id definiert, zu der gescrollt wird, als Element vom Typ "string".

Als nächstes gehen wir zur Datei app.component.ts, um einige weitere Funktionen für die Funktion scrollTo zu definieren.

Codeausschnitt - app.component.ts:

import { Component } from '@angular/core';
import { ScrollService } from '../_services/scroll.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'scrollone';
  constructor(private scrollService: ScrollService) {}
  scrollToId(id: string) {
    console.log("element id : ", id);
    this.scrollService.scrollToElementById(id);
  }
  scrollToElement(element: HTMLElement) {
    this.scrollService.scrollToElement(element);
  }
}

Wir haben die Datei scroll.service.ts in die Datei app.component.ts importiert, da die meisten Funktionen in der Datei scroll.service.ts vorkommen.

Der letzte Teil ist die Datei app.module.ts, in die wir die für die Funktionalität der App erforderlichen Module importieren werden.

Codeausschnitt - app.module.ts:

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { AppComponent } from "./app.component";
import { RouterModule, Route } from "@angular/router";
import { ScrollService } from "../_services/scroll.service";

const routes = <Route[]>[];

@NgModule({
  imports: [BrowserModule, FormsModule, RouterModule.forRoot(routes)],
  declarations: [AppComponent],
  providers: [ScrollService],
  bootstrap: [AppComponent]
})
export class AppModule {}

Ausgang:

ScrollTo-Funktion mit ElementById in AngularJs

ScrollTop-Funktion Mit ng-scrolltop in AngularJs

Wir wollen eine Funktion erstellen, die, sobald wir das Ende der Seite erreicht haben, auf ein Symbol klickt, das die Seite zurück nach oben scrollt; Wir werden die Abhängigkeit ng-scroll verwenden, um dies zu entwerfen. Navigieren Sie nach dem Erstellen eines neuen Projektordners zum Projektordner und installieren Sie die Abhängigkeit mit npm i ng-scrolltop.

Codeausschnitt - app.component.ts:

import { Component } from '@angular/core';

const HEADER_WINDOW = 'Try to scroll down the page to see the icon:';
const HEADER_ELEMENT = 'Try to scroll down inside the box to see the icon:';

@Component({
  selector: 'app-root',
  template: `
  <p>{{header}}</p>
  <div id="my-scrolling-element-id"
    [ngClass]="{'element': isElement}">
    <long-list></long-list>
  </div>
  <scrolltop
    [bottom]="iconBottom"
    [background]="iconColor"
    [fill]="iconFill"
    [size]="iconSize"
    [sizeInner]="iconSizeInner"
    [elementId]="elementId">
  </scrolltop>
    `,
    styles: [`
  li {
    line-height: 2em;
  }
  div.element {
    height: 80vh;
    overflow-y: scroll;
    border: 1px solid gray;
  }
  button {
    font-size: 130%;
    padding: 10px;
    background-color: #007bff;
  }
  button:hover {
    cursor: pointer;
  }
    `],
})

export class AppComponent {
  title = 'scrolltwo';
  which = 'window';

  get isElement() { return this.which === 'element'; }
  get iconBottom() {
    return this.isElement ? '45px' : '12px';
  }
  get iconColor() {
    return this.isElement ? 'yellow' : '#333';
  }
  get iconFill() {
    return this.isElement ? 'red' : 'white';
  }
  get iconSize() {
    return this.isElement ? '60px' : '48px';
  }
  get iconSizeInner() {
    return this.isElement ? '32' : '24';
  }
  get elementId() {
    return this.isElement ? 'my-scrolling-element-id' : '';
  }
  get header() {
    return this.isElement ? HEADER_ELEMENT : HEADER_WINDOW;
  }
  constructor() { }
  toggle() {
    this.which = this.isElement ? 'window' : 'element';
  }
}

Dieser obige Code erstellt die Struktur und Funktion der Seite, der erste befasst sich mit der Seitenstruktur und den Stilen. Der andere definiert die Symboleinstellungen und das erwartete Verhalten, d. h. wir möchten, dass er die Seite nach oben scrollt.

Nachdem wir die Funktion in der Komponente Fenster definiert haben, verwenden wir dann die Funktion toggle(), um das Symbol zu aktivieren. Als nächstes erstellen wir Inhalte, die lang genug sind, um durch die Seite zu scrollen, und wir möchten Bilder verwenden, also erstellen wir eine neue Datei und nennen sie long-list.component.ts.

Codeschnipsel - long-list.component.ts:

import { Component } from '@angular/core';

const IMAGE1 = "https://images.unsplash.com/photo-1539630417222-d685b659ffcc?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=85b0f0d9afe376eb5865bdfa31036c50&auto=format&fit=crop&w=500&q=60";
const IMAGE2 = "https://images.unsplash.com/photo-1519725242260-cdeaa84efe20?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=7b1d1b66ccb7b7dac48c1a5b5d272470&auto=format&fit=crop&w=500&q=60";
const IMAGE3 = "https://images.unsplash.com/photo-1541100242370-4d536228f2a7?ixlib=rb-0.3.5&s=d048e6130382ef846216db1cbace5b0c&auto=format&fit=crop&w=500&q=60";

@Component({
  selector: 'long-list',
  template: `
<ul>
  <li>jpococ ojoccp csocpcjsop sjcpscjcp s cc
    <img src="{{image1}}">
  </li>
  <li>jpococ ojoccp csocpcjsop sjcpscjcp s cc
    <img src="{{image2}}">
  </li>
  <li>jpococ ojoccp csocpcjsop sjcpscjcp s cc
    <img src="{{image3}}">
  </li>
  <li>jpococ ojoccp csocpcjsop sjcpscjcp s cc
    <img src="{{image1}}">
  </li>
  <li>jpococ ojoccp csocpcjsop sjcpscjcp s cc
    <img src="{{image2}}">
  </li>
  <li>jpococ ojoccp csocpcjsop sjcpscjcp s cc
    <img src="{{image3}}">
  </li>
  <li>jpococ ojoccp csocpcjsop sjcpscjcp s cc
    <img src="{{image1}}">
  </li>
  <li>jpococ ojoccp csocpcjsop sjcpscjcp s cc
    <img src="{{image2}}">
  </li>
  <li>jpococ ojoccp csocpcjsop sjcpscjcp s cc
    <img src="{{image3}}">
  </li>
  <li>jpococ ojoccp csocpcjsop sjcpscjcp s cc
    <img src="{{image1}}">
  </li>
  <li>jpococ ojoccp csocpcjsop sjcpscjcp s cc
    <img src="{{image2}}">
  </li>
  <li>jpococ ojoccp csocpcjsop sjcpscjcp s cc
    <img src="{{image3}}">
  </li>
  <li>jpococ ojoccp csocpcjsop sjcpscjcp s cc</li>
  <li>jpococ ojoccp csocpcjsop sjcpscjcp s cc</li>
  <li>jpococ ojoccp csocpcjsop sjcpscjcp s cc</li>
</ul>
  `,
  styles: [`
img {
  width: 80%;
}
  `],
})
export class LongListComponent {
  constructor() { }
  image1 = IMAGE1;
  image2 = IMAGE2;
  image3 = IMAGE3;
}

Wir holen die Bilder von einem Weblink. Wir beginnen damit, die Links zu definieren und sie in einem Array einzurichten.

Sie werden feststellen, dass wir die drei Bilder repliziert haben, um die Webseite länger zu machen. Wir müssen die erforderlichen Module in die Datei app.module.ts importieren.

Codeausschnitt - app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgScrolltopModule } from 'ng-scrolltop';
import { AppComponent } from './app.component';
import { LongListComponent } from './long-list.component';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    NgScrolltopModule,
  ],
  providers: [
  ],
  declarations: [
    AppComponent,
    LongListComponent,
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Ausgang:

ScrollTop-Funktion mit ng-scrolltop in AngularJs

ScrollTop-Button mit Bootstrap in AngularJs

Wir erstellen ein neues Projekt und installieren im Projektverzeichnis das Bootstrap-Paket.

ng fügt @ng-bootstrap/ng-bootstrap hinzu

Gehen Sie nach erfolgreicher Installation in die Datei app.component.html, um Folgendes zu schreiben.

Code-Snippet – app.component.html:

  <button class="btn btn-lg btn-outline-primary" (click)="open()">Launch demo modal</button>

Wir verwenden die von Bootstrap bereitgestellte Schaltflächenklasse, daher haben wir sie hier definiert. Als nächstes navigieren wir zur Datei app.component.ts, um Struktur und Verhalten für die Schaltfläche zu erstellen.

Code-Snippet – app.component.ts:

import { Component, Input } from '@angular/core';
import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngbd-modal-content',
  template: `<a name="top"></a>
    <div class="modal-header">
      <h4 class="modal-title">Hi there!</h4>
      <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <p>Hello, {{name}}!</p>
      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    </div>
    <div class="modal-footer">
      <a class="btn btn-outline-dark" href="#top">scroll to top</a>
    </div>
  `
})

export class NgbdModalContent {
  @Input() name;
  constructor(public activeModal: NgbActiveModal) {}
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'scrollthree';
  constructor(private modalService: NgbModal) {}
  open() {
    const modalRef = this.modalService.open(NgbdModalContent);
    modalRef.componentInstance.name = 'World';
  }
}

Im obigen Code haben wir die Seitenstruktur erstellt, und da wir eine lange Seite haben möchten, damit wir die Bildlaufleiste in Aktion sehen können, haben wir Zeilenumbrüche <br></br> hinzugefügt. Als nächstes haben wir eine Konfiguration für die Funktion open() erstellt, die den von uns erstellten Button in der Datei app.component.html aktiviert.

Dann gehen wir in die Datei app.module.ts, um die benötigten Module zu importieren.

Code-Snippet – app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent, NgbdModalContent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [
    AppComponent, NgbdModalContent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgbModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Ausgang:

ScrollTop-Schaltfläche mit Bootstrap in AngularJs

Abschluss

Mit der scrollTo-Funktion dreht sich alles um Komfort. Da die Leute mit einem Knopfdruck navigieren können, wohin sie wollen, macht es Website-Benutzern Spaß, Ihre Website zu besuchen.

Autor: Oluwafisayo Oluwatayo
Oluwafisayo Oluwatayo avatar Oluwafisayo Oluwatayo avatar

Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.

LinkedIn

Verwandter Artikel - Angular Function