7

How to Add "Go to Top" OR " Back to Top" Using angularjs

 3 years ago
source link: https://www.js-tutorials.com/javascript-tutorial/add-go-top-back-top-using-angularjs/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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

In the angularjs application, this tutorial helps you add “top to top”. In every angularjs web app this is a pretty common feature. We must detect conditions if the top button is displayed, and then provide features to scroll across the page.

We usually use '#' to scroll up the page, however it doesn’t work in the application angularjs.

Also Checkout other tutorials of angular grid,

Display “Back to Top” button in application

When the User scrolls down 100px the BackToTop button will show, 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.

Calculate the amount of user scrolled and calculated dependent upon the button BackToTop show/hide.

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();

Let’s create a backToTop() function into the controller 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

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

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

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK