baBackTop component

src/app/pages/pages.component.ts

@@ -1,7 +1,7 @@
 import {Component, ViewEncapsulation} from '@angular/core';
 import {RouteConfig} from '@angular/router-deprecated';
 
-import {PageTop, ContentTop, Sidebar} from '../theme/components';
+import {PageTop, ContentTop, Sidebar, BaBackTop} from '../theme/components';
 
 import {Dashboard} from './dashboard';
 import {Ui} from './ui';
@@ -13,7 +13,7 @@ import {Forms} from './forms';
   selector: 'pages',
   encapsulation: ViewEncapsulation.None,
   styles: [],
-  directives: [PageTop, Sidebar, ContentTop],
+  directives: [PageTop, Sidebar, ContentTop, BaBackTop],
   template: `
     <sidebar></sidebar>
     <page-top></page-top>
@@ -35,6 +35,7 @@ import {Forms} from './forms';
         </ul>
       </div>
     </footer>
+    <ba-back-top position="200"></ba-back-top>
     `
 })
 @RouteConfig([

src/app/theme/components/baBackTop/baBackTop.component.ts

@@ -0,0 +1,31 @@
+import {Component, HostListener, Input, ElementRef} from '@angular/core';
+
+@Component({
+  selector: 'ba-back-top',
+  styles: [require('./baBackTop.scss')],
+  template: `
+    <i class="fa fa-angle-up back-top ba-back-top" title="Back to Top"></i>
+  `
+})
+export class BaBackTop {
+
+  @Input() position:number = 400;
+  @Input() showSpeed:number = 500;
+  @Input() moveSpeed:number = 1000;
+
+  constructor (private _elementRef:ElementRef) {
+    this._onWindowScroll();
+  }
+
+  @HostListener('click')
+  _onClick():boolean {
+    $('html, body').animate({scrollTop:this.position}, {duration:this.moveSpeed});
+    return false;
+  }
+
+  @HostListener('window:scroll')
+  _onWindowScroll():void {
+    let el = this._elementRef.nativeElement.querySelector('.ba-back-top');
+    window.scrollY > this.position ? $(el).fadeIn(this.showSpeed) : $(el).fadeOut(this.showSpeed);
+  }
+}

src/app/theme/components/baBackTop/baBackTop.scss

@@ -0,0 +1,24 @@
+@import '../../../theme/sass/conf/conf';
+$height: 52px;
+
+.ba-back-top {
+  position: fixed;
+  width: $height;
+  height: $height;
+  cursor: pointer;
+  z-index: 9999;
+  display: none;
+  text-decoration: none;
+  right: (180px - $height) / 2;
+  bottom: 40px !important;
+  font-size: 45px;
+  text-align: center;
+  opacity: 0.4;
+  color: $primary;
+  background-color: rgba(0, 0, 0, 0.75);
+  border-radius: 50%;
+  line-height: 46px;
+  &:hover {
+    opacity: 0.8;
+  }
+}

src/app/theme/components/baBackTop/index.ts

@@ -0,0 +1 @@
+export * from './baBackTop.component.ts';

src/app/theme/components/index.ts

@@ -5,3 +5,4 @@ export * from './contentTop';
 export * from './baCard';
 export * from './baAmChart';
 export * from './baChartistChart';
+export * from './baBackTop';