Mashup How to Add “Go to Top”

[hrsimbu87]

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,

• Simple Example and Demo of Multistep form Using Angularjs
• Simple Example of Pagination Using jQuery and Bootstrap
• Simple Bootstrap Form Layout Examples
• Best Free Angularjs Grid & Table Plugin Examples

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

1 2 3 4 5 6 7

$(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.

1 2 3

$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>

[Sue_Macaluso]

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