AngularJS + Material's smooth scroll feature allows you to effortlessly navigate back to

Question

AngularJS + Material's smooth scroll feature allows you to effortlessly navigate back to

Have you seen the button on the AngularJS Material website? It's a round red button labeled as md-fab-button, located at the bottom right corner. I wonder where I can find the code for this button since there is no clear description provided.

Below is an example code snippet using AngularJS and Material, without the scroll-up button, similar to what I am currently using:

'use strict';
const application = angular.module("application", ['ngMaterial']);
application.controller('applicationCtrl', ['$scope', function(scope) { }]);

<head>
  <link rel="stylesheet" href="https://material.angularjs.org/1.1.20/angular-material.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
  <script src="https://code.angularjs.org/1.7.8/angular-animate.min.js"></script>
  <script src="https://code.angularjs.org/1.7.8/angular-aria.min.js"></script>
  <script src="https://material.angularjs.org/1.1.20/angular-material.min.js"></script>
</head>

<body ng-app="application" ng-controller="applicationCtrl" ng-init="onInit();" layout="column" class="ng-cloak" style="overflow: hidden;">
  <!-- Top menu -->
  <md-toolbar class="md-toolbar-tools md-hue-2" md-scroll-shrink>
    <!-- Main -->
    <a href="https://example.com/">
      <md-button>
        <b class="md-title">Main page</b>
      </md-button>
    </a>
  </md-toolbar>
  <md-content flex layout="column">
    <!-- Page header -->
    <div>
      <div layout="row" flex="100" md-whiteframe="1">
        <div flex layout="row" layout-margin layout-align="center center">
          <span class="md-display-1">Learning to write programs</span>
        </div>
      </div>
    </div>
    <!-- Page content -->
    <div layout="column" layout-padding layout-wrap style="flex-grow: inherit;">
      <div layout="row" layout-align="center center" md-whiteframe="1">
        <span class="md-display-1">Hello world</span>
      </div>
      <div layout="row" layout-align="center center" md-whiteframe="1">
        <span class="md-display-1">Hello space</span>
      </div>
      <div layout="row" layout-align="center center" md-whiteframe="1">
        <span class="md-display-1">Hello universe</span>
      </div>
      <div layout="row" layout-align="center center" md-whiteframe="1">
        <span class="md-display-1">Hello Santa Claus</span>
      </div>
      <div layout="row" layout-align="center center" md-whiteframe="1">
        <span class="md-display-1">Hello stars</span>
      </div>
      <div layout="row" layout-align="center center" md-whiteframe="1">
        <span class="md-display-1">Hello everyone</span>
      </div>
      <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
      <span>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi...

javascript angularjs scroll angularjs-material

Answer 1

Answer №1

If you're looking for the code behind the original button, you can find it here. It uses an undocumented factory called $mdUtil for scrolling, includes a custom directive named docsScrollClass for visual effects, and has some custom CSS styling.

However! In my scenario, this code doesn't function properly because it utilizes the md-scroll-shrink attribute which causes the header to shrink away while scrolling down.

The standard code snippet looks like this:

'use strict';
const app = angular.module("app", ['ngMaterial']);
app
  .controller('appController', ['$scope', '$mdUtil',
    function($scope, $mdUtil) {
      let mainContent = document.querySelector("main");
      let scrollEl =
        mainContent.querySelector('md-content[md-scroll-y]');
      $scope.scrollTop = function() {
        $mdUtil.animateScrollTo(scrollEl, 0, 200);
      }
    }
  ])
  .directive('docsScrollClass', function() {
    return {
      restrict: 'A',
      link: function(scope, element, attr) {

        let scrollParent = element.parent();
        let isScrolling = false;

        // Initial update of the state.
        updateState();

        // Register a scroll listener, which updates the state.
        scrollParent.on('scroll', updateState);

        function updateState() {
          let newState = scrollParent[0].scrollTop !== 0;

          if (newState !== isScrolling) {
            element.toggleClass(attr.docsScrollClass, newState);
          }

          isScrolling = newState;
        }
      }
    };
  });
// The rest of the code remains unchanged

// Include all other snippets as well

In my case:

// Update your solution here by pulling out the button outside from md-content into main. Don't modify $mdUtil or the CSS styles, only tweak the docsScrollClass directive for better display results.

Resolution:

To enhance functionality with both md-scroll-shrink on and off, adjust the structure based on the given template.

Here's the updated script that caters to both scenarios:

// Updated application code with new scroll functionalities
// Add updated directive for smoother scrolling effect

// Updated CSS classes for proper animation control

<!-- Your HTML/Body content goes here -->

// Insert final updated markup structure here

For more details, refer to this article on "Scroll-up fab-button".

Answer 2

If you're looking for the code behind the original button, you can find it here. It uses an undocumented factory called $mdUtil for scrolling, includes a custom directive named docsScrollClass for visual effects, and has some custom CSS styling.

However! In my scenario, this code doesn't function properly because it utilizes the md-scroll-shrink attribute which causes the header to shrink away while scrolling down.

The standard code snippet looks like this:

'use strict';
const app = angular.module("app", ['ngMaterial']);
app
  .controller('appController', ['$scope', '$mdUtil',
    function($scope, $mdUtil) {
      let mainContent = document.querySelector("main");
      let scrollEl =
        mainContent.querySelector('md-content[md-scroll-y]');
      $scope.scrollTop = function() {
        $mdUtil.animateScrollTo(scrollEl, 0, 200);
      }
    }
  ])
  .directive('docsScrollClass', function() {
    return {
      restrict: 'A',
      link: function(scope, element, attr) {

        let scrollParent = element.parent();
        let isScrolling = false;

        // Initial update of the state.
        updateState();

        // Register a scroll listener, which updates the state.
        scrollParent.on('scroll', updateState);

        function updateState() {
          let newState = scrollParent[0].scrollTop !== 0;

          if (newState !== isScrolling) {
            element.toggleClass(attr.docsScrollClass, newState);
          }

          isScrolling = newState;
        }
      }
    };
  });
// The rest of the code remains unchanged

// Include all other snippets as well

In my case:

// Update your solution here by pulling out the button outside from md-content into main. Don't modify $mdUtil or the CSS styles, only tweak the docsScrollClass directive for better display results.

Resolution:

To enhance functionality with both md-scroll-shrink on and off, adjust the structure based on the given template.

Here's the updated script that caters to both scenarios:

// Updated application code with new scroll functionalities
// Add updated directive for smoother scrolling effect

// Updated CSS classes for proper animation control

<!-- Your HTML/Body content goes here -->

// Insert final updated markup structure here

For more details, refer to this article on "Scroll-up fab-button".

AngularJS + Material's smooth scroll feature allows you to effortlessly navigate back to

Answer №1

Resolution:

Similar questions

The default styling of Next.js react-chatbot-kit is not functioning properly

What steps are needed to enable Azure AD authentication using msal-browser for a Next.js application in a production environment?

Extracting JSON Data into Text Boxes within jQuery UI Dialogs

How do I send a 404 error in Node JS Express when a third party API receives a bad request?

muiSlider limited to specific range

The HTML required attribute seems to be ineffective when using AJAX for form submission

Adding a total property at the row level in JavaScript

Using Redux with Next.js to implement getStaticPaths

What is the best way to sum the numbers in this code snippet?

Access my account on the one.com control panel using the identical login credentials

Transferring information from a $scope to a separate function within AngularJS

accessing deeply nested JSON objects during the process of mapping data from an API request

Swap out the variables in your function with the values selected from the dropdown menu

Is there a way to execute all functions with their respective arguments simultaneously using just one `run()` command?

When attempting to utilize VueJs v-bind:type on an input element, it appears to be ineffective when the type property name is

Problem encountered with a selection menu

Creating a new application to manage and oversee my mathematics classes

The functionality of Protovis JavaScript is not supported within a dropdownlist's onchange event

Utilized OBJLoader to load an item successfully; now seeking guidance on calculating the coordinates of an element within (three.js)

Utilize array.prototype.reduce() with strings