AngularJS - 创建浮动向下滚动/返回顶部按钮

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. 我有两个“img”按钮，一个是ScrollDown，另一个是ScrollUp。 Is there any way to create a directive as part of angular-scroll and/or AngularJS? 有没有办法创建一个指令作为角度滚动和/或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. 当用户点击ScrollDown按钮时，它将滚动到下一个div id（可能会将某个数组中的id放置在当前位置将被保存的位置，因此单击以触发滚动到下一个数组值）并且当用户滚动到底部，按钮应更改为ScrollUp，单击应将用户返回到页面顶部。

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. PS只是一个注释，应用程序是纯粹的AngularJS，所以应该没有jQuery依赖。

EDIT 编辑

I should also point out that I'm just learning Angular right now, so any help would be really appreciated. 我还应该指出，我现在正在学习Angular，所以任何帮助都会非常感激。

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. 有没有办法将一个指令附加到下面的控制器，它将包含一个部分锚点数组，添加一个位置监视器，这样当用户点击按钮时，它会将他带到下一个div id并且当他到达底部时，要更改的按钮图像并将用户带回到顶部。

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

AngularJS - 创建浮动向下滚动/返回顶部按钮

问题描述

1 个解决方案

解决方案1
2 已采纳 2016-01-28 10:50:44

AngularJS - 创建浮动向下滚动/返回顶部按钮

问题描述

1 个解决方案

解决方案1 2 已采纳 2016-01-28 10:50:44

解决方案1
2 已采纳 2016-01-28 10:50:44