Qlik Community

Qlik Sense Integration, Extensions, & APIs

Discussion board where members can learn more about Integration, Extensions and API’s for Qlik Sense.

Highlighted
Partner
Partner

Mashup How to Add “Go to Top”

How to Add “Go to Top” OR ” Back to Top” Using angularjs

 

This Angularjs tutorial help to add “Go to top” functionality in angularjs application.This is very common functionality in any angularjs web application.We need to identify condition when we will show back to top button and then add functionality to scroll up the page.

Normally we are using '#' to scroll up page,but in angularjs application that will not work.

Also Checkout other tutorials of angular grid,

Display “Back to Top” button in application

We will show BackToTop button when the user scroll down page 100px, We will create back to top button and added into theme.We will add hide class to hide the BackToTop button when page will load.

 

Now calculate how much user has been scrolled page and based on calculation show/hide BackToTop button.

Hide and Show BackToTop button

 

 

Now we will create backToTop() function in scope.This function will use to scroll up the page.

 

How to use BackToTop in angularjs

Now we will call above backToTop() function on button like below, We will call function on click of “Back to top” button.

 

Labels (1)
1 Reply
Community Manager
Community Manager

Re: Mashup How to Add “Go to Top”

Hi, What Qlik product is this related to? Id like to move it to the correct product forum.
Sue Macaluso