如何在jhipster中添加滚动顶部按钮?
如何在Jhipster中创建“滚动顶部”或“返回顶部”按钮如何在jhipster中添加滚动顶部按钮?,jhipster,Jhipster,如何在Jhipster中创建“滚动顶部”或“返回顶部”按钮 当我想访问导航栏时,我需要一个快速操作,以避免将所有页面向上滚动。以下是我在页面侧面设置“转到顶部”按钮的方法。 当您不在顶部时,按钮可见 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 th
当我想访问导航栏时,我需要一个快速操作,以避免将所有页面向上滚动。以下是我在页面侧面设置“转到顶部”按钮的方法。 当您不在顶部时,按钮可见
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/main/main.component.html
(在导航栏后添加)
左侧待办事项:
- I18N/Glyphicon
- 检查响应性和浏览器兼容性
- 皮耶雷克
#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 */
}
<jhi-scroll-top></jhi-scroll-top>
declarations: [JhiMainComponent, NavbarComponent, ErrorComponent, PageRibbonComponent, ActiveMenuDirective, FooterComponent, ScrollTopComponent],