Question

所以，我有一个非常独特的问题（基于架构）。

this homepage上有平滑滚动。它工作很好。如果单击顶部栏中的“注册”，表单（部分视图）显示正常。现在点击“关于”或“演示”，会发生一些疯狂的双重滚动。

另外，假设我们单击“关于”（单击注册后）并且发生双滚动，如果向上滚动并再次单击它将会正常工作，但现在向上滚动并单击“演示”并再次发生。这可以变得非常有趣，交替点击哈哈...这不是重点，可悲的是。

对于javascript我是一个绝对的初学者，我现在已经尝试了几天，但没有。

这是用于'关于'＆amp;的代码。 '演示'按钮：

//Smooth scroll - excludes register
$('a[href*=#], a[href*="/#"]').click(function () {
      var hash = $(this).attr('href');
      hash = hash.slice(hash.indexOf('#') + 1);
      if ( hash ) { $.scrollTo(hash == 'top' ? 0 : 'a[name='+hash+']', 500); window.location.hash = '#' + hash; return false; }
});

这是注册表格：

if (typeof window.history.pushState == "function") {
    function showRegister() {
        if ( window.location.pathname == '/home/register' ) {
            var form = $('#pg-signup-register');

            $('#landing-register-clip').css({ 'max-height': window.innerHeight + 'px' });

            form.css({
                'margin-top': ((window.innerHeight - form.outerHeight()) / 2) + 'px'
            });
            $('#landing-register').animate({
                height: window.innerHeight + 'px'
            }, 1000);

            $.scrollTo(0, 500);
        } else {
            $('#landing-register').animate({
                height: 0
            }, 1000);
        }
    }

    window.addEventListener('popstate', showRegister);

    // Smooth scrolling - register form
    $('a[href^="/home/register"], a[href="/"]').click(function () {
        if ( window.location.pathname != $(this).attr('href') )
            window.history.pushState(null, null, $(this).attr('href'));
        showRegister();
        return false;
    });

}

Answer 1

通过实现一个使用哈希而不是/home/register的系统解决了这个问题，这是IE和FF 3.6支持所需要的。

有关详细信息，请参阅this问题。

使用的代码：

// Show the register form when URL = #register
if (typeof window.history.pushState == "function") {
    function showRegister() {
        if (window.location.hash == '#register' ) {

            var form = $('#pg-signup-register');

            $('#landing-register-clip').css({ 'max-height': window.innerHeight + 'px' });

            form.css({
                'margin-top': ((window.innerHeight - form.outerHeight()) / 2) + 'px'
            });
            $('#landing-register').animate({
                height: window.innerHeight + 'px'
            }, 1000);

            $.scrollTo(0, 500);
        } else {
            $('#landing-register').animate({
                height: 0
            }, 1000);
        }
    }

    window.addEventListener('popstate', showRegister);

    // Smooth scrolling - register form
    $('a[href^="#register"], a[href="/"]').click(function () {
        if (window.location.pathname != $(this).attr('href'))
            window.history.pushState(null, null, $(this).attr('href'));
        showRegister();
        return false;
    });

平滑滚动马车与部分视图

1 个答案: