AngularJS - Creating a floating scroll down/back to top button

Question

I'm running into an issue and I see no way out.

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

I have two "img" buttons one is ScrollDown and another is ScrollUp. Is there any way to create a directive as part of angular-scroll and/or AngularJS? when a user clicks on a ScrollDown button,It will scroll to the next div id (maybe place ids in some kind of array where the current location will be saved, therefore the click to trigger scroll to next array value in line) and when a user scrolls to the bottom, the button should change to ScrollUp and a click should return the user to the top of the page.

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

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

EDIT

I should also point out that I'm just learning Angular right now, so any help would be really appreciated.

This is what I'm 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 append a directive to a controller below, that will contain an array of section anchors, add a location watch so when user clicks on the button, it takes him to a next div id in line and when he reaches the bottom, the button image to change and take user back to top.

I hope that the question is properly formulated now.

Answer 1

 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>

--SJ

AngularJS - Creating a floating scroll down/back to top button

Question

1 answers

solution1
2 ACCPTED 2016-01-28 10:50:44

AngularJS - Creating a floating scroll down/back to top button

Question

1 answers

solution1 2 ACCPTED 2016-01-28 10:50:44

solution1
2 ACCPTED 2016-01-28 10:50:44