How to smooth scroll to page anchor in angular 4 without plugins properly?

by

I was looking for a similar solution and tried to use the ngx-scroll-to package and found that its not working in latest version of angular (angular 6+) so decided to look into other option and found a solution which uses the browser’s native scrollIntoView and this seems to be the best solution so far

HTML code :

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

Ts code :

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

More Related Contents:

  1. Tracking scroll position and notifying other components about it
  2. How to detect a route change in Angular?
  3. How do I share data between components in Angular 2?
  4. Error when trying to inject a service into an angular component “EXCEPTION: Can’t resolve all parameters for component”, why?
  5. Ionic 2 Form goes up when keyboard shows
  6. When to use square brackets [ ] in directives @Inputs and when not?
  7. Angular2 – Interaction between components using a service
  8. Reactive forms – disabled attribute
  9. Angular4 Exception: Can’t bind to ‘ngClass’ since it isn’t a known property of ‘input’
  10. How to implement sleep function in TypeScript?
  11. Testing error case with observables in services
  12. Build Angular2 HTML and TypeScript to a single file
  13. Custom ExceptionHandler change detection lag
  14. Angular 2 Dynamically insert a component into a specific DOM node without using ViewContainerRef
  15. Trigger update of component view from service – No Provider for ChangeDetectorRef
  16. TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable
  17. Pass parameter into route guard
  18. Typescript dependency injection public vs private
  19. Rxjs Retry with Delay function
  20. What is the meaning of question mark in expressions in Angular 2?
  21. Merging http observables using forkjoin
  22. Angular: selected on option of select doesn’t work as excepted while using along with ngModel
  23. TypeScript-‘s Angular Framework Error – “There is no directive with exportAs set to ngForm”
  24. How to return observable from subscribe
  25. How to mock Angular 4.3 httpClient an error response in testing
  26. Angular 2 creating reactive forms with nested components
  27. Limit input field to two decimal places – Angular 5
  28. Angular 6 – how to mock router.events url response in unit test
  29. How to create and download text/Json File with dynamic content using angular 2+
  30. Angular4 Load external html page in a div

Leave a Comment