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.
First step would be to import HostListener and Inject, and create property of document using with Inject.
Next step would be to create method to detect the current state of window, and scroll to the top of window.
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 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.
The CSS class corresponding to the div tag provides the layout of the button.
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.