在循环中使用show hide功能时如何自动滚动到隐藏的div

Question

我有一个循环，可在页面下方按顺序显示工具提示。 一个div将打开几秒钟，然后关闭，然后另一个div将在页面的更下方打开，然后关闭，依此类推。

在没有点击功能的情况下，如何使浏览器在打开时自动滚动到每个div？

我的循环JavaScript如下所示：

    function fadeLoop() {

    var counter = 0,
        divs = $('.fader').css('visibility','visible').hide(),
        dur = 100;

    function showDiv() {
        divs.fadeOut(dur) // hide all divs
            .filter(function(index) {
                return index == counter % divs.length;
            }) // figure out correct div to show
            .delay(dur) // delay until fadeout is finished
            .fadeIn(dur); // and show it
        counter++;
    }; // function to loop through divs and show correct div
    showDiv(); // show first div    
    return setInterval(function() {
        showDiv(); // show next div
    }, 5 * 1000); // do this every 5 seconds    
};

$(function() {
    var interval;

    $(".start").click(function() {
        if (interval == undefined){
            interval = fadeLoop();
            $(this).val("Stop");
        }
        else{
            clearInterval(interval);
            $(this).val("Start");
            interval = undefined;
        }
    });
});

因此，当我单击“开始”时-循环开始。 我希望视图与打开的div保持一致。

提前致谢。

Answer 1

更改：

.fadeIn(dur);

至：

.fadeIn(dur, function() {
    $(this).focus();
});

http://api.jquery.com/fadeIn/

Answer 2

看一看https://github.com/Arwid/jQuery.scrollIntoView ，它已经使用了几次，并且效果很好。 还有另一个类似的插件，但这更加完整和稳定（个人观点）。 您可以简单地选择：

$("#some_element").scrollIntoView();

Github页面上提供了更多选项。 无论如何..听起来像您在做dom中的“导览”操作。 如果是这样，另一个不错的选择是： http : //bootstraptour.com/，尽管它基于Bootstrap代码（无论如何占用的空间很小）。

希望这可以帮助！