All geek questions in one place

AngularJS - Create a floating scroll down / back to the top button

I have a problem and I see no way out.

I have one page app, and currently I'm using angular -scroll for navigation. Now I am trying to do the following:

I have two img buttons: one is ScrollDown and the other is ScrollUp. Is there a way to create a directive as part of angular -scroll and / or AngularJS? when the user presses the ScrollDown button, he will scroll to the next div identifier (possibly to place the identifiers in some array where the current location will be saved, so click to cause scrolling to the next array value in the row), and when the user scrolls the bottom part, the button should go to ScrollUp and clicking should return the user to the top of the page.

I hope I explained it well, any help would be greatly appreciated.

PS is just a note, the application is pure AngularJS, so there should be no jQuery dependencies.

EDIT

I should also indicate that I am learning Angular right now, so any help would be really appreciated.

This is what I am currently using for navbar nav:

var ScrollApp = angular.module('myApp.ScrollApp', ['duScroll', 'ngAnimate']).value('duScrollOffset', 60);

ScrollApp.controller('ScrollCtrl', function($scope){
        var container = angular.element(document.getElementById('container'));
        var sectionhome = angular.element(document.getElementById('Home'));
        $scope.toTheTop = function() {
            container.scrollTop(60, 5000);
        };
        $scope.toHome = function() {
            container.scrollTo(sectionhome, 60, 1000);
        };
        $scope.scrollVariable = false;
    }
);

Is there a way to add a directive to the controller below that will contain an array of section bindings, add location data, so when the user clicks the button, he translates it to the next div identifier in the line and when it reaches the bottom, the button image changes and returns user up.

I hope that the question is correctly formulated now.

+4
source share
1 answer

var app = angular.module('app', []);

app.controller('scrollCtrl', ['$scope', function ($scope) {
  $scope.ids = ['id1','id2','id3','id4','id5'];
}]);

app.directive('myScroll', [ function () {
  return {
    restrict: 'E',
    template: '<div id="template" style="position:fixed; top: 2px;left: 35px;"><input type="button" value="up"  ng-click="up()"><input type="button" value="down" ng-click="down()"></div>',
    scope: {
      ids: '='
    },
    controller: ['$scope','$location','$anchorScroll', function ($scope, $location, $anchorScroll) {
      
      var current = 0;
      
      var scrollTo = function (id) {
        $location.hash($scope.ids[id]);
        $anchorScroll();
      };
      
      $scope.down = function () {
        if ($scope.ids.length - 1 > current)
        {
          current++;
          scrollTo(current);
         
        } else {
          current = 0;
          scrollTo(current);
        }
      };
      
      $scope.up = function () {
        if (current > 0)
        {
          current--;
          scrollTo(current);
        } else {
           current = $scope.ids.length -1;
           scrollTo(current);
        }
       
      }
    }]
  };
}]);
<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
    
  </head>

  <body ng-controller="scrollCtrl">
    <my-scroll ids="ids"></my-scroll>
    <div ng-repeat="id in ids" style="height:500px; background-color:yellow;">
      <div id="{{id}}">
        <h3>{{id}}</h3>
      </div>
    </div>
  </body>
</html>
Run codeHide result

- SJ

+2
source

Source: https://habr.com/ru/post/1626298/

More articles:


All Articles