如何在 jhipster 中添加滚动顶部按钮？答案

【问题标题】：How to add a scroll top button in jhipster?如何在 jhipster 中添加滚动顶部按钮？
【发布时间】：2018-08-31 05:28:26
【问题描述】：

如何在 Jhipster 中创建“滚动顶部”或“返回顶部”按钮。

当我想访问导航栏时，我想要一个快速的操作来避免向上滚动所有页面。

【问题讨论】：

标签： jhipster

【解决方案1】：

这是我在页面一侧设置“转到顶部”按钮的方法。当您不在顶部时，该按钮可见。

src/main/webapp/app/layouts/scroll-top/scroll-top.component.ts

ngOnInit() {
  // When the user scrolls down 20px from the top of the document, show the button
  window.addEventListener('scroll', this.scroll, true);
}

scroll = (): void => {
  // handle your scroll here
  // notice the 'odd' function assignment to a class field
  // this is used to be able to remove the event listener
  // console.log('scroll', document.body.scrollTop, document.documentElement.scrollTop);
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById('goTopBtn').style.display = 'block';
  } else {
    document.getElementById('goTopBtn').style.display = 'none';
  }
};

// When the user clicks on the button, scroll to the top of the document
goTop() {
  document.body.scrollTop = 0; // For Safari
  document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}

src/main/webapp/app/layouts/scroll-top/scroll-top.component.html

    <button (click)="goTop()" id="goTopBtn" title="Go to top" class="btn btn-secondary">Top</button>

src/main/webapp/app/layouts/scroll-top/scroll-top.component.scss （仅定位，样式在带有引导类的html中）

#goTopBtn {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Fixed/sticky position */
    bottom: 20px;
    /* Place the button at the bottom of the page */
    right: 30px;
    /* Place the button 30px from the right */
    z-index: 99;
    /* Make sure it does not overlap */
}

src/main/webapp/app/layouts/main/main.component.html （在navbar之后添加）

<jhi-scroll-top></jhi-scroll-top>

src/main/webapp/app/app.module.ts （在declarations中添加ScrollTopComponent）

declarations: [JhiMainComponent, NavbarComponent, ErrorComponent, PageRibbonComponent, ActiveMenuDirective, FooterComponent, ScrollTopComponent],

左 TODO ：

I18N/Glyphicon。
检查响应能力和浏览器兼容性

谢谢

【讨论】：