It is really important for a Progressive Web Application like Loklak to be user friendly. To enhance the user experience and help user scroll up through the long list of results, a new ‘Scroll to Top’ feature has been added to Loklak.
Integration Process
The feature is built using HostListener and Inject property of Angular, which allows to use Window and Document functionalities similar to Javascript.
Adding HostListener
First step would be to import HostListener and Inject, and create property of document using with Inject.
import { HostListener, Inject } from ‘@angular/core’; navIsFixed: boolean; constructor( @Inject(DOCUMENT) private document: Document ) { }
Next step would be to create method to detect the current state of window, and scroll to the top of window.
@HostListener(‘window:scroll’, []) onWindowScroll() { if (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop > 100) { this.navIsFixed = true; } else if (this.navIsFixed && window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop < 10) { this.navIsFixed = false; } } scrollToTop() { (function smoothscroll() { const currentScroll = document.documentElement.scrollTop || document.body.scrollTop; if (currentScroll > 0) { window.requestAnimationFrame(smoothscroll); window.scrollTo(0, currentScroll – (currentScroll / 5)); } })(); }
The last step would be to add user interface part i.e. HTML and CSS component for the Scroll to Top feature.
Creating user interface
HTML
HTML portion contains a div tag with class set to CSS created and a button with click event attached to it to call the scrollToTop() method created above.
CSS
The CSS class corresponding to the div tag provides the layout of the button.
button { display: block; margin: 32px auto; font-size: 1.1em; padding: 5px; font-weight: 700; background: transparent; border: none; cursor: pointer; height: 40px; width: 40px; font-size: 30px; color: white; background-color: #d23e42; border-radius: 76px; &:focus { border: none; outline: none; } } .scroll-to-top { position: fixed; bottom: 15px; right: 15px; opacity: 0; transition: all .2s ease-in-out; } .show-scroll { opacity: 1; transition: all .2s ease-in-out; }
The button style creates a round button with an interactive css properties. scroll-to-top class defines the behaviour of the div tag when user scrolls on the results page.
How to use?
Goto Loklak and search a query. On results page, scroll down the window to see upward arrow contained in a red circle like:
On clicking the button, user should be moved to the top of results page.
Resources
- W3C: How TO – Scroll Back To Top Button
- Angular docs. Angular.io: HostListener