更新地址栏中的 URL 以淡入叠加层 div？

Question

我有下面的代码，它淡出 in/out 一个 div 联系页面。我希望这个页面有自己的 URL，这样当用户在地址栏中输入它时，页面加载时 div 已经激活。另外，如果可能的话，我希望当用户在他们的浏览器上单击 'back' 或 'forward' 时，此页面的行为就像常规页面一样，这意味着历史记录保持不变。

我应该如何将此功能应用于我已有的功能？

var c = 0;
var contactHeight = $('#contact-keebs').outerHeight();

function contactFadeIn() {
    $('#contact-keebs').fadeIn(200);
    $('body').css({
        height   : contactHeight,
        overflow : 'hidden'
    });
    $('#contact-info, #clients').addClass('animated fadeInUp');
}

function contactFadeOut() {
    $('#contact-info, #clients').removeClass('animated fadeInUp');
    $('body').css({
        height   : '',
        overflow : ''
    });
    $('#contact-keebs').fadeOut(200);
}

$('#mail-wrap').click(function (e) {
    e.preventDefault();

    if (c++ % 2 == 0) {

        $('#contact-button').addClass('project-button').css('width', '71px').text('Projects');
        $('.mail-icon').attr('src', site.theme_path + '/img/icon-projects.png');
        $('#contact-button').shuffleLetters();

        if ($(window).scrollTop() != 0) {
            $('html, body').animate({
                scrollTop : 0
            },200, contactFadeIn);
        } else {
            contactFadeIn();
        }

    } else {

        $('#contact-button').removeClass('project-button').css('width', '96px').text('Get in touch');
        $('.mail-icon').attr('src', site.theme_path + '/img/icon-contact.png');
        $('#contact-button').shuffleLetters();

        if ($(window).scrollTop() != 0) {
            $('html, body').animate({
                scrollTop : 0
            },200, contactFadeOut);
        } else {
            contactFadeOut();
        }
    }
});

Answer 1

可能有助于使用 API PUSHSTATE？。 https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

更新地址栏中的 URL 以淡入叠加层 div？

Updating the URL in the address bar for a fade in overlay div?

javascript

jquery

url