Mashup How to Add “Go to Top”

hrsimbu87 — Sat, 16 Nov 2024 06:24:51 GMT

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

$(window).scroll(function () {

if ($(this).scrollTop() > 100) {

$('.btn-scroll-up').addClass('display').fadeIn();

} else {

$('.btn-scroll-up').removeClass('display').fadeOut();

}

});

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

$scope.backToTop = function() {

$("html, body").animate({ scrollTop: 0 }, 1000);

}

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.

1	<button type="button" scrollable ng-click="backToTop()">Back to Top</button>

Re: Mashup How to Add “Go to Top”

Sue_Macaluso — Wed, 06 Mar 2019 13:30:19 GMT

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

topic Mashup How to Add “Go to Top” in Integration, Extension & APIs

Mashup How to Add “Go to Top”

Re: Mashup How to Add “Go to Top”