2016-04-05 15 views
0

私のウェブサイトで私のページを私の興味のあるIDにスクロールさせたいです。なぜ私が代わりにこのコード複数のコマンドをsetTimeoutに設定する方法

setTimeout(function(){ 
    window.scrollTo(0, leapY); 
}, timer*speed); 
を書く場合: 私は私が必要とする正確に何

var $scope, $location; 
var headerHeigh = 50; 
angular.module('allApps').service('anchorSmoothScroll', function(){ 

    this.scrollTo = function(eID) { 

     var startY = currentYPosition(); 
     var stopY = elmYPosition(eID)-headerHeigh; 
     var distance = stopY > startY ? stopY - startY : startY - stopY; 
     if (distance < 100) { 
      scrollTo(0, stopY); return; 
     } 
     var speed = Math.round(distance/50); 
     if (speed >= 20) speed = 20; 
     var step = Math.round(distance/25); 
     var leapY = stopY > startY ? startY + step : startY - step; 
     var timer = 0; 

     if (stopY > startY) { 
      for (var i=startY; i<stopY; i+=step) { 
       setTimeout("window.scrollTo(0, "+leapY+")", timer*speed); 
       leapY += step; if (leapY > stopY) leapY = stopY; timer++; 

      } return; 
     } 
     for (var i=startY; i>stopY; i-=step) { 
      setTimeout("window.scrollTo(0, "+leapY+")", timer * speed); 
      leapY -= step; if (leapY < stopY) leapY = stopY; timer++; 
     } 


     function currentYPosition() { 
      // Firefox, Chrome, Opera, Safari 
      if (self.pageYOffset) return self.pageYOffset; 
      // Internet Explorer 6 - standards mode 
      if (document.documentElement && document.documentElement.scrollTop) 
       return document.documentElement.scrollTop; 
      // Internet Explorer 6, 7 and 8 
      if (document.body.scrollTop) return document.body.scrollTop; 
      return 0; 
     } 

     function elmYPosition(eID) { 
      var elm = document.getElementById(eID); 
      var y = elm.offsetTop; 
      var node = elm; 
      while (node.offsetParent && node.offsetParent != document.body) { 
       node = node.offsetParent; 
       y += node.offsetTop; 
      } return y; 
     } 

    }; 

}); 

angular.module('allApps').controller('menuCtrl', function($scope, $location, anchorSmoothScroll) { 

    $scope.gotoElement = function (eID){ 
     $location.hash(eID); 
     anchorSmoothScroll.scrollTo(eID); 

    }; 
    }); 

私の質問は(私は元からいくつかの小さな編集をした)んそのStackOverflowの上ここでは、この素敵なコードを見つけました

"スクロール効果"が失われますか?

スクロールと一緒に、スクロールしながら不透明感のようなエフェクトをスクロールしたいので、setTimeoutに複数の操作があるようにしたいからです。あなたは、ループの両方の内側にこのコードを使用することができます

+0

X 0 'の速度は常に0になります 'ので、あなたが'タイマー* speed'同様 – gurvinder372

+0

をインクリメントする必要がありますか? – Andy

+0

私は分かりません。私が元の 'setTimeout(" window.scrollTo(0、 "+ leapY +") "、timer * speed);のように書くと'それは動作します。違いが分かりません –

答えて

0

を支援するための

ありがとう:

(function(leapY) { 
    setTimeout(function(){ 
     window.scrollTo(0, leapY); 
    }, timer*speed); 
})(leapY); 
関連する問題