如何將頁面滾動到輸入字段焦點上的中間位置

Question

我試圖在某人通過表單中的輸入字段標記頁面時向上或向下滾動頁面。我希望當用戶選中時，當前關注的輸入元素將在頁面中間垂直居中。我爲此寫了一個指令，但它不起作用，就像我期望的那樣。

angular 
    .module('app') 
    .directive('formScroll', formScroll); 

function formScroll($window) { 

     function link(scope, elem) { 
      elem.bind('focus', function() { 
       var offset, 
        elOffset = elem.offset().top, 
        elHeight = elem.height(), 
        windowHeight = $window.innerHeight; 

       offset = elOffset - ((windowHeight - elHeight)/2); 

       $window.scrollTo(0, offset); 
      }); 
     } 
    } 

Answer 1

var app = angular.module('plunker', []); 
app.controller('MainCtrl', function($scope) { 
    $scope.name = 'World'; 
}); 

app.directive('formScroll', formScroll); 
    function formScroll($window) { 
     return { 
     link: function(scope, elem) { 
       elem.bind('focus', function() { 
        var offset, 
       elOffset = elem.prop('offsetTop'), //.offset().top, 
       elHeight = elem.prop('height'), //elem.height(), 
       windowHeight = $window.innerHeight; 
       offset = elOffset - ((windowHeight - elHeight)/2); 
       $window.scrollTo(0, offset); 
       }); 
     } 
     } 
    } 

我修改了formScroll函數返回一個對象{鏈接：...}， 另外，使用elem.prop（....）