Горизонтальный одностраничный сайт не будет возвращаться к предыдущему разделу DIV

Это должно решить вашу проблему:

ДЕМО

$(document).ready(function () {
    $('.main-nav').on('click', function (e) {
        e.preventDefault();
        var toTarget = $(this).attr('href');
        history.pushState(null, null, toTarget);
        $(window).triggerHandler('hashchange');
    });
});

$(window).on('hashchange', function () {
    if(!window.location.hash) return;
    var $target = $(window.location.hash);
    $('html, body').stop().animate({
        scrollLeft: $target.offset().left,
        scrollTop: $target.offset().top
    }, 900, 'swing');
});

Я хотел добавить это, чтобы те, у кого возникают проблемы с совместимостью между браузерами при использовании кода Вольфа, могли получить передышку от того, чтобы биться головой о [...выбор дилера].

Вернуться на главную

Некоторые браузеры плохо работают при попытке вернуться на домашнюю страницу, поскольку она не имеет хеш-значения.

Исправление хэша главной страницы

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

Проблема с одновременной прокруткой Webkit

ОГРОМНАЯ проблема в некоторых браузерах webkit, особенно мобильных (читай iOS!!!), заключается в том, что когда вы одновременно прокручиваете по горизонтали и вертикали, то в конечном итоге вы получаете разбрызгиваемый, нервный беспорядок, который возвращает вас туда, где вы начали. Довольно разрушительно и очень озадачивает.

Сначала я подумал, что это произошло из-за того, что браузер не хеширует новые значения, но позже я понял, что новые значения были там, просто не «сообщались» в область просмотра. Адресная строка iOS (7+) не показывает изменения по мере их возникновения, только после нажатия на адресную строку (DOI! упс, надо было попробовать это первым делом...) я понял это вне. Назовите меня сумасшедшим, но если ваш код опирается на что-то одно (новое значение хеш-функции), а это явно не происходит, вы можете предположить (как и я), что причина, по которой код не работает, связана с одной вещью то, что вы «видите», не происходит.

Полное объяснение: Горизонтальный одностраничный сайт: проблемы с прокруткой и перелистыванием в мобильном Webkit

Функция щелчка остается такой же, как у Вольфа.

Исправление кроссбраузерности

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

});

Дополнительные примечания

Я удалил большую часть своего дополнительного кода, но оставил условные операторы в конце, чтобы показать, как можно вызвать изменение страницы на мобильном сайте. В зависимости от того, как вы решите разрешить пользователю перемещаться по вашей странице (я решил вывести свое меню слева, отсюда и «переключение-открытие»), вы захотите дать время другим анимациям завершиться, прежде чем вы запустите анимация прокрутки. Для большинства мобильных устройств, как правило, достаточно много одновременной обработки. Я все еще слишком молод, чтобы понять, как анимация работает, поэтому я решил это.

Я также добавил функцию для постепенного исчезновения контейнера страницы во время его прокрутки. Если вы идете из одного конца сайта в другой, вам придется немало потрудиться, чтобы добраться так далеко. Такое количество контента, проносящегося мимо, может немного отталкивать от просмотра. Небольшое затухание, кажется, притупляет удар, и я осмелюсь сказать, что это тоже что-то добавляет.

Наконец, для сенсорных устройств я добавил функцию, которая отслеживает и корректирует положение горизонтальной прокрутки между изменениями страниц. Очень легко случайно прокрутить влево и вправо, проводя пальцем по телефону, поэтому это казалось необходимым.