如何在setTimeout中设置多个命令

How to set multiple command into setTimeout

本文关键字：命令 设置 setTimeout      更新时间：2023-12-29

在我的网站中，我希望我的页面滚动到我感兴趣的id。我在stackoverflow上发现了这个不错的代码，它正是我所需要的（我只是对原始代码进行了一些小编辑）

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

我的问题是：为什么我写这个代码

setTimeout(function(){
     window.scrollTo(0, leapY);
}, timer*speed);

我失去了"滚动效果"？

我之所以想这样做，是因为我希望在滚动的同时，有一些效果，比如滚动时不透明度的变化，所以我希望在setTimeout中有一个函数有多个操作。

感谢您帮助

您可以在两个for循环中使用此代码：

(function(leapY) {
    setTimeout(function(){
        window.scrollTo(0, leapY);
    }, timer*speed);
})(leapY);
相关文章：