必须单击两次才能恢复页面的一部分

Question

我正在编写一个脚本，该脚本使用pushState根据用户所在的页面部分更改页面标题和网址。

我的脚本位于JSFiddle：https://jsfiddle.net/tnc0fouu/

这是脚本：

var nowDiv = 0;
    var divs = new Array();
    divs.push([
        "lipsum1", // div id
        "lipsum1", // url
        "Lipsum 1" // title
    ]);
    divs.push(["lipsum2", "lipsum2", "Lipsum 2"]);
    divs.push(["lipsum3", "lipsum3", "Lipsum 3"]);

    $(document).ready(function(){
        // chg_state();

        $.each(divs, function(index, value) {
            var el = scrollMonitor.create(document.getElementById(value[0]));
            var bked = 0;
            el.fullyEnterViewport(function(){
                if(bked == 0){
                    nowDiv = index;
                    chg_state();
                    bked = 1;
                }
            });
            el.exitViewport(function(){
                bked = 0;
            });
        });
    });

    function chg_state(){
        History.pushState({state:'new'}, divs[nowDiv][2], divs[nowDiv][1]);
        //alert("new state: " + divs[nowDiv][2]);

        History.options.debug = true;
        var State = History.getState();
        History.debug('statechange:', State.data, State.title, State.url);
    }

当我点击浏览器的后退按钮时，我希望页面滚动到上一个状态的div。但是，我必须在后退按钮中单击两次才能执行我想要的操作。

有没有办法只需点击后退按钮就可以做到这一点？