플러그인 없이 각도 4의 페이지 앵커까지 스크롤을 부드럽게 하는 방법은 무엇입니까?

플러그인 없이 각도 4의 페이지 앵커까지 스크롤을 부드럽게 하는 방법은 무엇입니까?

내가 이루고 싶은 것은 내가 이렇게 되어야 한다고 생각하는 것처럼 해시태그로 정의한 하단 / 지정된 디브 영역으로 클릭하여 부드럽게 스크롤하는 것입니다.

여기 JQuery: https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate_smoothscroll 을 위해 쓰여진 w3 학교 예제의 실제 예시가 있습니다.

제가 하는 일은 이 답변에서 엿보는 것입니다: 페이지 앵커에 해시태그를 사용한 각도2 라우팅

하지만 저는 답을 잘 이해하지 못합니다. 답은 다음과 같습니다.

이 부분은 HTML 부분입니다.

<a [routerLink]="['somepath']" fragment="Test">Jump to 'Test' anchor </a>

그리고 이 아래에 라우터.항법장치는 어디에 코드를 넣어야 합니까?component.ts right? 그런데 이 기능은 어떻게 접속합니까?구현(클릭)해야 합니까?

this._router.navigate( ['/somepath', id ], {fragment: 'test'});

그리고 이 아래에, 나는 그것을 이해합니다. 그것은 내 컴포넌트.ts에 적어야 합니다:

** Add Below code to your component to scroll**

  import {ActivatedRoute} from '@angular/router'; // <-- do not forget to import

  private fragment: string;

  constructor(private route: ActivatedRoute { }

  ngOnInit() {
    this.route.fragment.subscribe(fragment => { this.fragment = fragment; });
  }

  ngAfterViewInit(): void {
    try {
      document.querySelector('#' + this.fragment).scrollIntoView();
    } catch (e) { }
  }

"어떤 길"이란 무엇을 의미합니까?제 루트에 루트를 추가해야 하는 거죠?보통 나는 여기에 새로운 경로를 추가합니다. 예를 들어 다음과 같습니다.

export const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'product', redirectTo: '/product' },
  ...homeRoutes,
  ...productRoutes
];

HTML, 경로, 구성 요소의 전체 예시 코드를 제공해 줄 수 있는 사람?

비슷한 솔루션을 찾고 있었는데 ngx-scroll-to-package를 사용하려고 했는데 최신 버전의 Angular(angular 6+)에서 작동하지 않는 것을 발견하여 다른 옵션을 알아보기로 하고 브라우저의 네이티브를 사용하는 솔루션을 찾았습니다. scrollIntoView그리고 이것이 지금까지 최고의 해결책인 것 같습니다.

HTML 코드:

<button (click)="scrollToElement(target)"></button>
<div #target>Your target</div>

Ts 코드:

scrollToElement($element): void {
    console.log($element);
    $element.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
  }

CSS 전용 솔루션

html {
  scroll-behavior: smooth;
}

탐색 또는 페이지 재로드 후에도 작동합니다.

IE, Edge 또는 Safari에서는 작동하지 않습니다.

구성 요소에서 간단히 이 작업을 수행할 수 있습니다.

const element = document.querySelector("#destination")
if (element) element.scrollIntoView({ behavior: 'smooth', block: 'start' })

참조: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

새로운 Angular 버전의 솔루션은 다음과 같습니다.

성분.

<p (click)="scrollTo()">scroll</p>
   .
   .
   .
<form id="myForm">
   .
   .
   .
</form>

component.ts

constructor(private viewportScroller: ViewportScroller) {}

scrollTo() {
    this.viewportScroller.scrollToAnchor('myForm');
}

자네의 장군 스타일

html {
  scroll-behavior: smooth;
}

 // you can use ViewportScroller calss
 constructor(
        private viewPortscroller: ViewportScroller
        ) {}

scrollingTop() {
    this.viewPortscroller.scrollToPosition([0 , 0]);
  }

// and for smoothly scroll you can do that

html, body {
     height: 100%;
     scroll-behavior: smooth;
 }

흐름을 추가해야 합니다.

1 인app-routing.module.ts:

@NgModule({
  imports: [RouterModule.forRoot(routes,
      {
        useHash: true,
        scrollPositionRestoration: 'top',
        anchorScrolling: 'enabled',
        scrollOffset: [0, 64],
        relativeLinkResolution: 'legacy'
      }
    )],
  exports: [RouterModule]
})
export class AppRoutingModule { }

2인style.scss:

body, html {
  overflow-x: hidden;
  scroll-behavior: smooth !important;
}

3- 인 더.html파일:

<li>
    <a routerLink="home">Home</a>
</li>
<li>
    <a routerLink="." fragment="about">About</a>
</li>

또는 다음과 같은 경우:

<div class="mt-4">
      <a class="main-button" style="margin-left: 0px;" routerLink="." fragment="testimonials">
           testimonials
       </a>
</div>

그냥 ngx-page-scroll을 사용했습니다.다음과 같이 간단할 수 있습니다.

<a class="nav-link nav-item-text" pageScroll href="#categories">Categorias</a>

....

<section id="categories">

자세한 내용은 패키지 페이지를 참조하십시오. https://www.npmjs.com/package/ngx-page-scroll

또한 구성 요소의 컨트롤러에서 스크롤을 제어하는 서비스를 통해 스크롤 프로세스를 구성하거나 사용자 지정 동작을 이벤트로 구현하는 메커니즘을 제공합니다.

대괄호를 제거해 봅니다.

class="startScroll" scrollTo="'#firstDiv'" scrollBoxID="'#scrollBox'"

이렇게 해서 작업하게 되었으니, 맨 위 페이지가 스크롤하고 싶은 아이디라고 생각하세요.

document.getElementById("top-page").scrollTo({ behavior: "smooth", top: 0 });

CSS는 다음과 같이 사용할 수 있습니다.

html {
  scroll-behavior: smooth;
}

document.getElementById("맨 위 페이지").scrollIntoView({ 동작: "smooth" });

은 의의 을 할 수 .ViewportScroller스크롤 위치 관리자를 정의합니다.우선 다음과 같이 컨스트럭터에 주입해야 합니다.

import { ViewportScroller } from '@angular/common';
...
constructor(
   ...
   private readonly _viewportScroller: ViewportScroller){}
...

그리고나서

this._viewportScroller.scrollToPosition([0, 0])

메모

이 스타일을 CSS 또는 SCSS 파일에 추가하면 앱에서 부드러운 스크롤 효과를 추가할 수 있습니다.

html {
  scroll-behavior: smooth;
}

방법들

위치로 스크롤

/**
 * Scrolls to a specified position.
 * @param position A position in screen coordinates (a tuple with x and y values).
 */
abstract scrollToPosition(position: [number, number]): void;

앵커로 스크롤

/**
 * Scrolls to an anchor element.
 * @param anchor The ID of the anchor element.
 */
abstract scrollToAnchor(anchor: string): void;

오프셋 설정

getScrollPosition

setHistoryScroll복원

자세한 정보는

아래 행을 style.css로 추가하면 각진 응용 프로그램 페이지에서 멋진 스크롤을 얻을 수 있습니다.

::-webkit-scrollbar {
    width: 5px;
}


::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
    background: #c3c3c3 !important;
}

앵커 기반의 각도 스크롤에 기본 기능을 사용할 수 있습니다.자세한 내용은 이 링크를 참조하시기 바랍니다.

constructor(private el: ElementRef)

ngAfterViewInit() {
  setTimeout(() => {
    this.el.nativeElement.scrollIntoView({
      behavior: 'smooth',
      block: 'center',
    });
  }, 0);
}

언급URL : https://stackoverflow.com/questions/46658522/how-to-smooth-scroll-to-page-anchor-in-angular-4-without-plugins-properly