AngularJS - 創建浮動向下滾動/返回頂部按鈕

Question

我遇到了一個問題，我看不出任何出路。

我有一個頁面應用程序，我目前正在使用角度滾動導航。 現在，我想要完成的是以下內容：

我有兩個“img”按鈕，一個是ScrollDown，另一個是ScrollUp。 有沒有辦法創建一個指令作為角度滾動和/或AngularJS的一部分？ 當用戶點擊ScrollDown按鈕時，它將滾動到下一個div id（可能會將某個數組中的id放置在當前位置將被保存的位置，因此單擊以觸發滾動到下一個數組值）並且當用戶滾動到底部，按鈕應更改為ScrollUp，單擊應將用戶返回到頁面頂部。

我希望我已經解釋得很好，任何幫助都將不勝感激。

PS只是一個注釋，應用程序是純粹的AngularJS，所以應該沒有jQuery依賴。

編輯

我還應該指出，我現在正在學習Angular，所以任何幫助都會非常感激。

這就是我目前用於導航欄導航的內容：

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

有沒有辦法將一個指令附加到下面的控制器，它將包含一個部分錨點數組，添加一個位置監視器，這樣當用戶點擊按鈕時，它會將他帶到下一個div id並且當他到達底部時，要更改的按鈕圖像並將用戶帶回到頂部。

我希望這個問題現在得到妥善制定。

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 - 創建浮動向下滾動/返回頂部按鈕

問題描述

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