一頁網站定位問題Firefox和IE

Question

我正在嘗試設計單頁滾動網站。 該網站有一個導航欄，當用戶滾動該導航欄時，其位置將變得固定。 問題是，當頁面使用幻燈片的導航鏈接向下滾動時，在動畫播放后，頁面會跳回到頂部，使幻燈片的頁邊距為零。 （不是整個網頁。向下滾動到的幻燈片）僅在firefox和IE中發生，它完全可以在webkit瀏覽器中使用。 請幫助我解決此問題。我的代碼如下。

html

    <div class="wrapper">
        <nav class="mnav">
            <ul>
                <li><a href="#slide1">home</a></li>
            </ul>
            <ul>
                <li><a href="#slide2">home</a></li>
            </ul>
            <ul>
                <li><a href="#slide3">home</a></li>
            </ul>
        </nav>

        <div id="slide1" class="slide"></div>
        <div id="slide2" class="slide"></div>
        <div id="slide3" class="slide"></div>
    </div>

的CSS

.slide {
height: 800px;
}
#slide1 {
background: red;
}
#slide2 {
background: orange;
}
#slide3 {
background: green;
}

.mnav li {
display: inline;
float: left;
background: #fff;

}

.fixed  {
position: fixed;
top: 0; 
 }

    .fixed nav ul li {
display: inline;
float: left;
background: #fff;
}

滾動的JQUERY

  $('document').ready(function() {
var topRange = 350, // measure from the top of the viewport to X pixels down
edgeMargin = 280, // margin above the top or margin from the end of the page
animationTime = 4000, // time in milliseconds
contentTop = [];

$(document).ready(function() {

    // Stop animated scroll if the user does something
    $('html,body').bind('scroll mousedown DOMMouseScroll mousewheel keyup', function(e) {
        if (e.which > 0 || e.type == 'mousedown' || e.type == 'mousewheel') {
            $('html,body').stop();
        }
    })
    // Set up content an array of locations
    $('nav').find('a').each(function() {
        contentTop.push($($(this).attr('href')).offset().top);
    })
    // Animate menu scroll to content
    $('nav').find('a').click(function() {
        var sel = this, newTop = Math.min(contentTop[ $('nav a').index($(this))], $(document).height() - $(window).height());
        // get content top or top position if at the document bottom
        $('html,body').stop().animate({
            'scrollTop' : newTop- 400
        }, animationTime, "easeInOutQuint",function() {
            window.location.hash = $(sel).attr('href');
        });
        return false;
    })
    // adjust  menu
    $(window).scroll(function() {
        var winTop = $(window).scrollTop(), bodyHt = $(document).height(), vpHt = $(window).height() + edgeMargin;
        // viewport height + margin
        $.each(contentTop, function(i, loc) {
            if ((loc > winTop - edgeMargin && (loc < winTop + topRange || (winTop + vpHt ) >= bodyHt ) )) {
                $('nav a').removeClass('selected').eq(i).addClass('selected');
            }
        })
    })
})
  });

我用來固定導航的jQuery

$(document).ready(function() {
$(window).scroll(function() {
    var scrollTop = 80;
    if ($(window).scrollTop() >= scrollTop) {
        $('nav').addClass('fixed');


    }
    if ($(window).scrollTop() < scrollTop) {
        $('nav').removeClass('fixed');

    }
})
})

Answer 1

您正在設置window.location.hash，這會導致頁面在某些瀏覽器中跳轉。 要阻止這種情況發生，請在設置哈希值之后立即再次設置滾動條。 所以代替：

..., animationTime, function() {
    window.location.hash = $(sel).attr('href');
}...

你做

..., animationTime, function() {
    window.location.hash = $(sel).attr('href');
    $('html,body').scrollTop(newTop-200);
}...

另請參閱此更新的提琴： http : //jsfiddle.net/pyUY7/6/