jquery在按钮单击和鼠标滚动时切换自动滚动 - 更平滑的自动滚动

Question

我有一个启用自动滚动的网站，但给用户几秒钟的时间来禁用它或开始滚动也会禁用它。我以为我可以切换真/假，但这似乎不起作用。我不确定如何实现鼠标滚动事件。这是我的代码：

var autoplay=true;

    window.setTimeout(function(){
        if  (autoplay)
             $("html, body").animate({ scrollTop: $(document).height() }, 22000);
        },2000);

    $(document).ready(function() {
        $(".scrollToggle").click(function(){
            if(autoplay==true) {
                autoplay==false;
            } 
            else {
                autoplay==true;
            }
        });
    });

另外，有谁知道我怎样才能让这个自动滚动更流畅？

更新： 非常感谢！这太棒了！唯一的问题是； 1）由于某种原因，它不会在页面加载时自动启动，2）当关闭时，它会从顶部重新开始（这并不是什么大问题），3）它似乎在滚动时会加快速度下。这是我正在运行的其他功能，也许有什么东西阻止了它：

$(window).load(function() { // makes sure the whole site is loaded
        $('#status').fadeOut(); // will first fade out the loading animation
        $('#preloader').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website.
        $('body').delay(350).css({'overflow':'visible'});

        setTimeout (function () {
            scrollTo(0,0);
        }, 0);

    });

    var autoplay = true,
        root = $("html, body"),
        t = 24000, //overall duration for the animation, you can set this
        n = 0,
        d = 0;

    function scrollStart() {
        n = Date.now();//get the current time in ms
        t -= d;//the current duration minus the time already traverse
        root.animate({scrollTop: $(document).height() }, t);       
        autoplay = false;
    }

    function scrollStop() {
        //on stop instance, get the time already took to travel
        d = Date.now() - n;
        root.stop(true);
        autoplay = true;
    }

    $(".scrollToggle").click(function(){
        if(autoplay) {
            scrollStart();
            $("#onOff").text("OFF");
        } else {
            scrollStop();
            $("#onOff").text("ON");
        }
    });

    $(window).scroll(function(){
        autoplay = false;
    });  

    $(window).bind('resize', function(e)
    {
      if (window.RT) clearTimeout(window.RT);
      window.RT = setTimeout(function()
      {
        this.location.reload(false); /* false to get page from cache */
      }, 100);
    });

Answer 1

你的切换结构没问题，但你的操作符不正确，应该是：

   $(".scrollToggle").click(function(){
        if(autoplay == true) {//or just if(autoplay) which is truthy
            autoplay = false;
        } 
        else {
            autoplay = true;
        }
    });

要处理鼠标滚动，您可以简单地使用scroll() 事件，它同时处理滚动条拖动和鼠标滚轮滚动：

    $(window).scroll(function(){
        autoplay = false;
    });

---

如果您想要暂停/恢复功能，您可以使用stop() 暂停，然后通过重置动画继续。

function scrollStart(){
    $("html, body").animate({ scrollTop: $(document).height() }, 22000);
}

$(".scrollToggle").click(function(){
    if(autoplay==true) {
        scrollStart();
        autoplay=false;
    } else {
        $("html, body").stop(true);
        autoplay=true;
    }
});

但最终，当您多次切换时，您会看到下一个恢复动画与其初始动画相比要慢一些。我们可以将动画与速度相关联，其中它具有距离和时间，现在使用这个解决方案，速度会发生变化，因为它已经穿越了一段距离，但我们仍然给它相同的时间/持续时间。由于速度是随时间变化的距离，为了在动画的每次恢复中保持速度，我们还应该计算减少的时间。

var autoplay = true,
    root = $("html, body"),
    t = 8000, //overall duration for the animation, you can set this
    n = 0,
    d = 0;

function scrollStart() {
    n = Date.now();//get the current time in ms
    t -= d;//the current duration minus the time already traverse
    root.animate({scrollTop: $(document).height() }, t);       
    autoplay = false;
}

function scrollStop() {
    //on stop instance, get the time already took to travel
    d = Date.now() - n;
    root.stop(true);
    autoplay = true;
}

$(".scrollToggle").click(function(){
    if(autoplay) {
        scrollStart();
    } else {
        scrollStop();
    }
});

更新演示：http://jsfiddle.net/cMJZ4/1/，查看控制台查看时差。

Answer 2

请试试这个，

var autoplay=true;

    window.setTimeout(function(){
        if  (autoplay)
             $("html, body").animate({ scrollTop: $(document).height() }, 22000);
        },2000);

    $(document).ready(function() {
        $(".scrollToggle").click(function(){
         $('html,body').queue([]).stop();

        });
    });

Answer 3

如何不从 div 移动（无滚动）

<script type="text/javascript">
    function toggle(target){
        var artz = document.getElementsByClassName('eds');
        var targ = document.getElementById(target);  
        var isVis = targ.style.display=='block';
        // hide all
        for(var i=0;i<artz.length;i++){
            artz[i].style.display = 'none';
        }
        // toggle current
        targ.style.display = isVis?'none':'block';
        return false;
    }
</script>