【问题标题】：How to smooth scroll to page anchor in angular 4 without plugins properly?如何在没有插件的情况下以角度 4 平滑滚动到页面锚点？
【发布时间】：2018-03-21 09:01:10
【问题描述】：

我想要实现的是单击并平滑滚动到底部/指定的 div 区域，我用标签定义，就像我认为它应该是这样的。

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

我所做的就是从这个答案中窥视：Angular2 Routing with Hashtag to page anchor

但我不太明白答案，答案看起来像这样：

这部分是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”是什么意思？我应该在我的 routes.ts 中添加一条路线，对吗？通常，我在这里添加一个新路径，例如：

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

谁能提供完整的 HTML、路由和组件示例代码？

【问题讨论】：

从我阅读和搜索的内容来看，这将是一个 SMOOTH SCROLL 的代码，它不像我认为的 JQuery，所以我决定使用这个完美工作的插件： npmjs.com/package/@nicky-lenaers/ngx-scroll-to随意使用

标签： angular typescript scroll routes

【解决方案1】：

我正在寻找类似的解决方案并尝试使用 ngx-scroll-to 包，发现它在最新版本的 angular (angular 6+) 中不起作用，因此决定研究其他选项并找到使用浏览器的解决方案native 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"});
  }

【讨论】：

超级！现在最好的解决方案。你还需要一个 Polyfill 来支持更多浏览器：github.com/iamdustan/smoothscroll
在我看来，使用 polyfill 是正确的答案。
一种不需要外部库的简单“原生”解决方案似乎是最好的解决方案
请注意，不幸的是，这在 iOS Safari 上不起作用 - 似乎根本不支持 scrollIntoViewOptions。
重要现在 Nicky Lenaers ngx-scroll-to 支持 Angular 8！

【解决方案2】：

仅 CSS 解决方案

html {
  scroll-behavior: smooth;
}

即使在导航或页面重新加载后也能正常工作。

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

【讨论】：

【解决方案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

【讨论】：

对我不起作用，但是当我将上述代码示例中的第一行切换为： const element = document.getElementById("#destination");然后它起作用了。

【解决方案4】：

我刚刚使用了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

它还提供了配置滚动过程的机制，或者通过控制组件控制器滚动的服务实现自定义行为的事件。

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

你必须添加流动：

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>

【讨论】：

【解决方案7】：

尝试删除方括号：

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

【讨论】：

我已尝试删除并收到此错误：ERROR TypeError: Cannot read property 'top' of undefined

【解决方案8】：

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

component.html

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

component.ts

constructor(private viewportScroller: ViewportScroller) {}

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

your-general-styles.css

html {
  scroll-behavior: smooth;
}

【讨论】：

【解决方案9】：

我这样做了，考虑到首页是您要滚动到的 id。

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

【讨论】：

【解决方案10】：

你可以使用 css ：

html {
  scroll-behavior: smooth;
}

【讨论】：

【解决方案11】：

document.getElementById("top-page").scrollIntoView({ behavior: "smooth" });

【讨论】：

【解决方案12】：

在 style.css 中添加以下行以在您的 Angular 应用程序页面中获取 nicescroll。

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

【讨论】：