Question

我有以下滚动脚本，它可以很好地滚动页面，完全符合我的要求。

$(function(){
    $('a[href*=#]').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
        && location.hostname == this.hostname) {
            var $target = $(this.hash);
            $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
            if ($target.length) {
                var targetOffset = $target.offset().top;
                $('html,body').animate({scrollTop: targetOffset}, 1000);
                return false;
            }
        }
    });
});

然而，我需要它忽略顶部说200px，因为我在页面顶部有一个固定的标题，内容滚动后面。

这意味着当我滚动到顶部时它会将内容滚动到固定标题后面，所以我看不到它，所以我需要它滚动到标题下方...所以要将标题的底部视为顶部浏览器我猜想....

这可以做到非常方便吗？

非常感谢您的帮助

Answer 1

这样的事情会起作用吗？

var targetOffset = $target.offset().top - 200;

或者抓住标题元素的高度以获得额外的偏移量。

var targetOffset = $target.offset().top - $("element").outerHeight(true);

Answer 2

如果你的代码有条件可以使用这样的东西

//check if the absolute position is below header
if ($('#IdOfTheScrollElement').position().top >= 200 ){
//scroll
}
else {
//do nothing
}

Answer 3

代码很好，你只需要在这里删除固定标题的高度，例如，如果它是200px。它会完美地运作。

 $('html,body').animate({scrollTop: (targetOffset().top)-200}, 1000);

单击按钮时也可以检查

$(function() {

$('a[href*=#]:not([href=#])').click(function() {

    // Check height of the header and padding
    var header_height = $('.header').outerHeight();

从偏移

中删除它

$('html,body').animate({scrollTop: (targetOffset().top) - header_height }, 1000);

JQuery从浏览器顶部滚动到Offset？

3 个答案: