3

各セクションが ajax 経由で読み込まれる単一ページ アプリケーションに取り組んでいます。ホームページは独自のページで、[About] をクリックすると、シングル ページ アプリに移動します。各セクションで変更する URL と、このスニペットを操作するためのブラウザの戻るボタンと進むボタンを取得しました。

$('.down-button').on('click', function() {
        var stateObj = { principles: "about-principles" };
        history.pushState(stateObj, null, "about-principles");
        $('#principles-wrap').scrollintoview({ duration: 1000 });
    });

ただし、クリックしてホームページに戻ると、ホームページが更新されず、[概要] ページにとどまります。または、ホームページに戻るリンクをクリックすると、404 エラーが発生します。

私は何が欠けていますか？

編集

残りのコードは次のとおりです。

function button_scroll () {
// Call scrollIntoView js file into this 
$.getScript("/js/jquery.scrollintoview.min.js", function() {
    $('.down-button').on('click', function() {
        var stateObj = { principles: "about-principles" };
        history.pushState(stateObj, null, "about-principles");
        $('#principles-wrap').scrollintoview({ duration: 1000 });
    });
    $('.up-button-principles').on('click', function() {
        var stateObj = { mission: "about-mission" };
        history.pushState(stateObj, null, "about-mission");
        $('#mission-wrap').scrollintoview({ duration: 1000 });
    });
    $('.down-button-principles').on('click', function() {
        var stateObj = { snapshot: "about-snapshot" };
        history.pushState(stateObj, null, "about-snapshot");
        $('#snapshot-wrap').scrollintoview({ duration: 1000 });
    });
    $('.up-button-snapshot').on('click', function() {
        var stateObj = { principles: "about-principles" };
        history.pushState(stateObj, null, "about-principles");
        $('#principles-wrap').scrollintoview({ duration: 1000 });
    });
    $('.down-button-snapshot').on('click', function() {
        var stateObj = { people: "about-people" };
        history.pushState(stateObj, null, "about-people");
        $('#people-wrap').scrollintoview({ duration: 1000 });
    });
    $('.up-button-people').on('click', function() {
        var stateObj = { snapshot: "about-snapshot" };
        history.pushState(stateObj, null, "about-snapshot");
        $('#snapshot-wrap').scrollintoview({ duration: 1000 });
    });

});

}

//Dropdown
$(document).ready(function () {
$(window).on('load resize', function () {
    resize_mission();
    resize_principles();
    resize_snapshot();
    resize_people();
    button_scroll();
});
var dropDown = $('.dropdown');
$('h3.about').on('click', function() {
    dropDown.slideDown('fast', function() {
        var url = 'about2.php'
        var stateObj = { mission: "about-mission" };
        history.pushState(stateObj, null, "about-mission");
        $.get(url, function(data) {
            resize_mission();
            resize_principles();
            resize_snapshot();
            resize_people();
            button_scroll();
        });
    });
});

});

これが私がやっていることのすべてです。プラグインはありません。

4

1 に答える 1

2

アバウトページのホームページへのクリックイベントのデフォルトアクションを停止していますか? のように、あなたはあなたの概要ページを使用していますか、preventDefault()それともstopPropagation()リンクをクリックしていますか? また、hashchange イベントでのデフォルトの動作を停止していますか? 履歴の実装に関するコードをさらに確認する必要があるかもしれません。履歴用のプラグインを使用していますか?

于 2012-11-05T21:46:15.417 に答える