如何在没有正确插件的情况下平滑滚动到角度为4的页面锚点？

Question

我想要实现的是点击并平滑滚动到底部/指定的div区域,我用hashtag定义就像我认为它应该是这样的.

这是w3school示例中为JQuery编写的实例:https://www.w3schools.com/jquery/tryit.asp ？ filename = tryjquery_eff_animate_smoothscroll

我做的是从这个答案中窥视:Angular2使用Hashtag路由到页面锚点

但我真的不明白答案,答案看起来像这样:

这部分是HTML部分:

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

在这之下,router.navigate是我应该把代码放在哪里？component.ts对吗？但我如何访问此功能？我应该实施(点击)？

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

在这之下,我得到它,它应该写在我的component.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) { }
  }

什么是"somepath"是什么意思？我应该在我的路线中添加路线.对吗？通常,我在这里添加一个新的路径,例如:

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

任何人都可以在HTML,路由和组件中提供完整的示例代码吗？

Answer 1

我正在寻找一个类似的解决方案,并尝试使用ngx-scroll-to包,发现它不能使用最新版本的角度(角度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"});
  }

Answer 2

从我读到的和我搜索的内容来看,它只是一个SMOOTH SCROLL的代码,它不仅仅是像我想的JQuery,所以我决定使用这个完美的工作插件:https://www.npmjs. COM /包/ @尼基-lenaers/NGX-滚动到

随意使用它

Answer 3

您只需在组件中执行此操作即可.

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

参考:https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Answer 4

在新的 Angular 版本中，解决方案是：

组件.html

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

组件.ts

constructor(private viewportScroller: ViewportScroller) {}

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

your-general-styles.css

html {
  scroll-behavior: smooth;
}

Answer 5

仅CSS解决方案

html {
  scroll-behavior: smooth;
}

即使在导航或页面重新加载后也可以使用。

请注意，它不适用于IE，Edge或Safari。

Answer 6

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

Answer 7

你必须添加以下内容：

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>