Javascript 水平一页网站赢得'；“不去”；“向后”；前分区

快速背景故事：

我让一切都正常工作，但过了一段时间，我发现它不再正常工作了。返回“页面”的能力对我来说非常重要，所以我开始撤销我最近所做的任何更改。这不起作用，所以我决定重新创建框架（希望插入内容以找到问题点），但问题仍然存在。我已经将代码提炼到下面的基本内容

我过去可以点击后退按钮，我会立即被带到上一个面板。现在，除了更改“#page_name”和当前面板移动1px之外，什么也没有发生。如果我点击了几个链接（从而存储了更多的历史“轨迹”），那么一旦我再次点击后退按钮，我最终返回到一个状态，但不是正确的状态

这是一把小提琴：

JQ

CSS

HTML

家
产品
零件清单目录
服务
报价请求
关于
联系页面
解决方案查询
新闻
法律信息

---

这对这个项目是一个巨大的打击，因为这个特定的功能是我所追求的。任何帮助都将不胜感激

这将解决您的问题：

我想添加这一点，以便那些在使用Wolff的代码时在跨浏览器遵从性方面遇到问题的人可以暂时避免对[…经销商的选择]进行打击

返乡问题 有些浏览器在试图返回主页时表现不佳，因为它没有哈希值

主页哈希修复程序

function hashHome() {
    var currentHash = location.hash;
    var homeHash = '#home';
    if (currentHash == '') {
        history.pushState(null, null, homeHash);
    }
}
hashHome();

$(window).on('hashchange', function() {

    if(!window.location.hash) return;
    var target = $(window.location.hash);
    var targetHash = window.location.hash;

    var iOS = ( navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false );

    var currentPosition = $(window).scrollLeft();

    var targetPosLeft = target.offset().left;

    var targetPosTop = target.offset().top;

    function unbindWindow() { $(window).unbind('scroll'); }

    function repositionWin() {
        unbindWindow();
        $(window).on('scroll', function() {
            var alteredPosLeft = $(window).scrollLeft();
            var alteredPosTop = $(window).scrollTop();          
            if (alteredPosLeft != targetPosLeft) {
                window.scrollTo(targetPosLeft, alteredPosTop),
                unbindWindow(),
                repositionWin();
            }           
        });
    }

    function fadePages() {
        if (targetPosLeft == currentPosition) {
        }
        else {
            function fadePageOut() {
                $('.page-container').stop(true,false).animate({
                    opacity: "0.25",
                    transition: "opacity 0.1s 0.0s ease"
                });
            }
            function fadePageIn() {
                $('.page-container').stop(true,false).animate({
                    opacity: "1.0",
                    transition: "opacity 0.3s 0.0s ease"
                });
            }
            fadePageOut();
            setTimeout (fadePageIn, 900);
        }
    }

    function pageChange() {
        if (jQuery.browser.mobile === true) {
            if (iOS === true) {
                unbindWindow();
                $('html,body').stop(true,false).animate({
                    scrollLeft: targetPosLeft}, 1400);
                    setTimeout (repositionWin, 1500);
            }
            else {
                unbindWindow();
                $('html,body').stop(true,false).animate({
                    scrollLeft: targetPosLeft}, 1200, function() {
                        $(this).stop(true,false).animate({
                            scrollTop: targetPosTop
                        }, 200, repositionWin);
                });
            }
        }
        else {
            fadePages();
            unbindWindow();
            $('html,body').stop(true,false).delay(100).animate({
                scrollLeft: targetPosLeft,
                scrollTop: targetPosTop
            }, 1300, repositionWin);
        }
    }   
    if ($('#mini-site-menu-button-container').is(':visible') === true && $('#main-menu-wrapper').hasClass('show-main-menu') === true) {
        setTimeout (pageChange, 300)
    }
    if ($('.footer-container').is(':visible') === true) {
        setTimeout (pageChange, 500)
    }
    if ($('.form-instructions-wrapper').hasClass('expand-form-instruct') === true) {
        setTimeout (pageChange, 500)
    }
    if ($('.quick-quote-container').hasClass('toggle-open') === true) {
        setTimeout (pageChange, 500)
    }
    if ($('#mini-site-menu-button-container').is(':visible') === false && $('.footer-container').is(':visible') === false && $('.form-instructions-wrapper').hasClass('expand-form-instruct') === false && $('.quick-quote-container').hasClass('toggle-open') === false) {
        pageChange();
    }
    if ($('#main-menu-wrapper').hasClass('show-main-menu') === false && $('.footer-container').is(':visible') === false && $('.form-instructions-wrapper').hasClass('expand-form-instruct') === false && $('.quick-quote-container').hasClass('toggle-open') === false) {
        pageChange();
    }

});

---

Webkit同步滚动问题 一些webkit浏览器，特别是移动浏览器（阅读iOS！！！）的一个大问题是，当你同时水平和垂直滚动时，你最终得到的是一团乱七八糟的乱七八糟的东西，让你回到起点。非常具有破坏性，非常令人困惑

我最初认为这是因为浏览器没有散列新值，但后来我意识到新值在那里，只是没有“报告”到视口。iOS地址栏（7+）不会在发生更改时显示更改，只有在点击地址栏（DOI！哎哟，应该先尝试一下…）后我才发现。你可以说我疯了，但是如果你的代码依赖于一件事（新的hashvalue），而这件事没有明显发生，你可能会认为（就像我所做的那样），代码不起作用的原因是因为你“看到”的一件事没有发生

完整解释：

单击功能与Wolff的相同。

跨浏览器修复

function hashHome() {
    var currentHash = location.hash;
    var homeHash = '#home';
    if (currentHash == '') {
        history.pushState(null, null, homeHash);
    }
}
hashHome();

$(window).on('hashchange', function() {

    if(!window.location.hash) return;
    var target = $(window.location.hash);
    var targetHash = window.location.hash;

    var iOS = ( navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false );

    var currentPosition = $(window).scrollLeft();

    var targetPosLeft = target.offset().left;

    var targetPosTop = target.offset().top;

    function unbindWindow() { $(window).unbind('scroll'); }

    function repositionWin() {
        unbindWindow();
        $(window).on('scroll', function() {
            var alteredPosLeft = $(window).scrollLeft();
            var alteredPosTop = $(window).scrollTop();          
            if (alteredPosLeft != targetPosLeft) {
                window.scrollTo(targetPosLeft, alteredPosTop),
                unbindWindow(),
                repositionWin();
            }           
        });
    }

    function fadePages() {
        if (targetPosLeft == currentPosition) {
        }
        else {
            function fadePageOut() {
                $('.page-container').stop(true,false).animate({
                    opacity: "0.25",
                    transition: "opacity 0.1s 0.0s ease"
                });
            }
            function fadePageIn() {
                $('.page-container').stop(true,false).animate({
                    opacity: "1.0",
                    transition: "opacity 0.3s 0.0s ease"
                });
            }
            fadePageOut();
            setTimeout (fadePageIn, 900);
        }
    }

    function pageChange() {
        if (jQuery.browser.mobile === true) {
            if (iOS === true) {
                unbindWindow();
                $('html,body').stop(true,false).animate({
                    scrollLeft: targetPosLeft}, 1400);
                    setTimeout (repositionWin, 1500);
            }
            else {
                unbindWindow();
                $('html,body').stop(true,false).animate({
                    scrollLeft: targetPosLeft}, 1200, function() {
                        $(this).stop(true,false).animate({
                            scrollTop: targetPosTop
                        }, 200, repositionWin);
                });
            }
        }
        else {
            fadePages();
            unbindWindow();
            $('html,body').stop(true,false).delay(100).animate({
                scrollLeft: targetPosLeft,
                scrollTop: targetPosTop
            }, 1300, repositionWin);
        }
    }   
    if ($('#mini-site-menu-button-container').is(':visible') === true && $('#main-menu-wrapper').hasClass('show-main-menu') === true) {
        setTimeout (pageChange, 300)
    }
    if ($('.footer-container').is(':visible') === true) {
        setTimeout (pageChange, 500)
    }
    if ($('.form-instructions-wrapper').hasClass('expand-form-instruct') === true) {
        setTimeout (pageChange, 500)
    }
    if ($('.quick-quote-container').hasClass('toggle-open') === true) {
        setTimeout (pageChange, 500)
    }
    if ($('#mini-site-menu-button-container').is(':visible') === false && $('.footer-container').is(':visible') === false && $('.form-instructions-wrapper').hasClass('expand-form-instruct') === false && $('.quick-quote-container').hasClass('toggle-open') === false) {
        pageChange();
    }
    if ($('#main-menu-wrapper').hasClass('show-main-menu') === false && $('.footer-container').is(':visible') === false && $('.form-instructions-wrapper').hasClass('expand-form-instruct') === false && $('.quick-quote-container').hasClass('toggle-open') === false) {
        pageChange();
    }

});

---

附加注释

我删除了大部分附加代码，但将条件语句保留在末尾，以显示如何调用移动站点上的页面更改。根据您选择允许用户浏览页面的方式（我选择从左侧弹出菜单，因此选择“切换打开”），您将希望在启动滚动动画之前允许其他动画完成。对于大多数移动设备来说，一次处理所有数据往往是非常困难的。我还是太幼稚了，不明白动画是怎么变的，所以我就是这样处理的

我还添加了一个函数，可以在页面滚动时淡出页面容器。如果你要从站点的一端到另一端，那么要走那么远，需要做大量的腿部工作。如此多的内容飞驰而过，可能会让人有点反感。褪色一点似乎会减弱打击，我敢说它也会增加一些东西

---

最后，对于支持触摸的设备，我添加了一个功能，可以在页面更改之间监视和校正水平滚动位置。通过在手机上滑动，很容易不小心左右滚动，所以这似乎是必要的。

我在Firefox（27.0.1）中可以使用该提琴。我尝试了该提琴，在Firefox（最新版本）中效果很好。我看到了这个问题，使用Chrome。如果导航到第二个页面，然后是第三个页面，然后在小提琴窗口中单击鼠标右键，然后单击“上一步”，则第三个页面“服务”将保持原样，但会在大约1像素的范围内颠簸。你能详细说明一下你的目标浏览器/设备，以及你是否有任何其他功能或事件与此行为相关吗？@Lazerblade，我在我所有的浏览器（Chrome、Firefox、IE、Opera和Safari；最新版本）中都看到了这种行为，所以我觉得没有必要提及。我的错。tcj，一开始对我来说也很有效。很奇怪，这似乎在很大程度上起到了作用。在IE（最新版本）中，它执行该功能，但似乎不会重复。在Opera中，它不会返回主页（因为我相信，初始页面没有哈希值）。这已经有一段时间了，但我想知道您是否可以使用您提供的脚本查看我遇到的一个新问题：

function hashHome() {
    var currentHash = location.hash;
    var homeHash = '#home';
    if (currentHash == '') {
        history.pushState(null, null, homeHash);
    }
}
hashHome();

$(window).on('hashchange', function() {

    if(!window.location.hash) return;
    var target = $(window.location.hash);
    var targetHash = window.location.hash;

    var iOS = ( navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false );

    var currentPosition = $(window).scrollLeft();

    var targetPosLeft = target.offset().left;

    var targetPosTop = target.offset().top;

    function unbindWindow() { $(window).unbind('scroll'); }

    function repositionWin() {
        unbindWindow();
        $(window).on('scroll', function() {
            var alteredPosLeft = $(window).scrollLeft();
            var alteredPosTop = $(window).scrollTop();          
            if (alteredPosLeft != targetPosLeft) {
                window.scrollTo(targetPosLeft, alteredPosTop),
                unbindWindow(),
                repositionWin();
            }           
        });
    }

    function fadePages() {
        if (targetPosLeft == currentPosition) {
        }
        else {
            function fadePageOut() {
                $('.page-container').stop(true,false).animate({
                    opacity: "0.25",
                    transition: "opacity 0.1s 0.0s ease"
                });
            }
            function fadePageIn() {
                $('.page-container').stop(true,false).animate({
                    opacity: "1.0",
                    transition: "opacity 0.3s 0.0s ease"
                });
            }
            fadePageOut();
            setTimeout (fadePageIn, 900);
        }
    }

    function pageChange() {
        if (jQuery.browser.mobile === true) {
            if (iOS === true) {
                unbindWindow();
                $('html,body').stop(true,false).animate({
                    scrollLeft: targetPosLeft}, 1400);
                    setTimeout (repositionWin, 1500);
            }
            else {
                unbindWindow();
                $('html,body').stop(true,false).animate({
                    scrollLeft: targetPosLeft}, 1200, function() {
                        $(this).stop(true,false).animate({
                            scrollTop: targetPosTop
                        }, 200, repositionWin);
                });
            }
        }
        else {
            fadePages();
            unbindWindow();
            $('html,body').stop(true,false).delay(100).animate({
                scrollLeft: targetPosLeft,
                scrollTop: targetPosTop
            }, 1300, repositionWin);
        }
    }   
    if ($('#mini-site-menu-button-container').is(':visible') === true && $('#main-menu-wrapper').hasClass('show-main-menu') === true) {
        setTimeout (pageChange, 300)
    }
    if ($('.footer-container').is(':visible') === true) {
        setTimeout (pageChange, 500)
    }
    if ($('.form-instructions-wrapper').hasClass('expand-form-instruct') === true) {
        setTimeout (pageChange, 500)
    }
    if ($('.quick-quote-container').hasClass('toggle-open') === true) {
        setTimeout (pageChange, 500)
    }
    if ($('#mini-site-menu-button-container').is(':visible') === false && $('.footer-container').is(':visible') === false && $('.form-instructions-wrapper').hasClass('expand-form-instruct') === false && $('.quick-quote-container').hasClass('toggle-open') === false) {
        pageChange();
    }
    if ($('#main-menu-wrapper').hasClass('show-main-menu') === false && $('.footer-container').is(':visible') === false && $('.form-instructions-wrapper').hasClass('expand-form-instruct') === false && $('.quick-quote-container').hasClass('toggle-open') === false) {
        pageChange();
    }

});