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

});

jQuery滚动问题

1 个答案: