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

Posted 2023-02-22

【中文标题】如何在没有插件的情况下以角度 4 平滑滚动到页面锚点？

【英文标题】：How to smooth scroll to page anchor in angular 4 without plugins properly?

【发布时间】：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随意使用

【参考方案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;