Smooth scroll buggy with a partial view

问题

So, I have a pretty unique problem (based somewhat on architecture).

There is smooth scrolling on this homepage. It works fine. If you click 'Register' in the top-bar the form (partial view) shows fine. Now click either 'About' or 'Demo' and some crazy double-scrolling occurs.

Also, let's say we click 'About' (after clicking register) and the double-scrolling happens, if you scroll up and click it again it will work fine, but now scroll up and click 'Demo' and it happens again. This can get quite fun alternating the click haha... that's not the point, sadly.

I'm an absolute beginner when it comes to javascript and I've been trying this for a few days now but nothing.

This is the code being used for the 'About' & 'Demo' buttons:

//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; }
});

This is for the reg form:

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

}

回答1:

This issue was solved by implementing a system that uses hashes instead of /home/register which is/was needed for IE and FF 3.6 support.

See this question for more details.

Code used:

// 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;
    });

来源：https://stackoverflow.com/questions/16606428/smooth-scroll-buggy-with-a-partial-view

标签

javascript

smooth-scrolling