jQuery滾動問題

Question

所以我正在為朋友建立一個網站，我想讓它滾動href點擊，這很容易，我設法用流暢的動畫做到了。 但問題是，當我加載頁面並單擊FIRST鏈接時，滾動不准確，並且在按下Test1之后單擊任何內容后，其再次不准確。 由於我很難解釋，生病后jsfiddle鏈接所以你可以測試它。

$(document).ready(function() {

$('.click').click(function(e){
   // prevent default action
  e.preventDefault();

  scrollToElement( $(this).attr('href'), 1000 );
});

    var scrollToElement = function(el, ms){
    var speed = (ms) ? ms : 600;
    $('html,body').animate({
        scrollTop: $(el).offset().top-102
    }, speed);
}

});

完整代碼： http ： //jsfiddle.net/pxmfs78k/

如何測試我的問題：

第一次按下任何鏈接，然后你會看到div沒有放在我想要的位置，如果你再次按下同一個鏈接，它會正確定位，然后點擊直到你沒有問題重新加載或按test1鏈接，第一個。

那么任何想法可能會導致什么問題？

我讀了這個https://stackoverflow.com/questions/19750702/jquery-scrolling-issues-with-scrolltop線程，我無法用那里給出的解釋解決我的問題。

Answer 1

這是因為你將導航設置為粘性，因此，將其從流中移除，並且整個內容跳躍102px，以解決此問題，將粘性類提供給正文而不是導航並使用填充來對抗它。 http://jsfiddle.net/pxmfs78k/1/

CSS

body.sticky {
    padding-top: 102px;
}
body.sticky .nav {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 100;
    border-top: 0;
}

JS

$(document).ready(function () {
    var stickyNavTop = $('.nav').offset().top;

    var stickyNav = function () {
        var scrollTop = $(window).scrollTop();

        if (scrollTop > stickyNavTop) {
            $('body').addClass('sticky');

        } else {
            $('body').removeClass('sticky');
        }
    };

    stickyNav();

    $(window).scroll(function () {
        stickyNav();
    });
});



$(document).ready(function () {

    $('.click').click(function (e) {
        // prevent default action
        e.preventDefault();

        scrollToElement($(this).attr('href'), 1000);
    });

    var scrollToElement = function (el, ms) {
        var speed = (ms) ? ms : 600;
        $('html,body').animate({
            scrollTop: $(el).offset().top - 102
        }, speed);
    }

});