JQuery从浏览器顶部滚动到偏移量？答案

【问题标题】：JQuery Scroll to Offset from top of browser?JQuery从浏览器顶部滚动到偏移量？
【发布时间】：2010-10-21 19:08:16
【问题描述】：

我有以下滚动脚本，它可以很好地滚动页面，完全按照我的意愿工作。

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

但是，我需要它忽略顶部的 200 像素，因为我在页面顶部有一个固定的标题，内容滚动到后面。

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

这样会很方便吗？

非常感谢您的帮助

【问题讨论】：

感谢您提出这个问题整晚都在苦苦挣扎，试图了解如何以完全相同的原因完成此任务！

标签： javascript jquery

【解决方案1】：

这样的东西有用吗？

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

或者获取头部元素的高度以获得额外的偏移量。

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

【讨论】：

【解决方案2】：

你可以在你的代码上使用类似这样的条件来做到这一点

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

【讨论】：

感谢大家的帮助。我不确定它们是否有效，因为我不知道将它们放在代码中的哪个位置才能产生效果，在迷雾的情况下，我只是打破了滚动:(

【解决方案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);

【讨论】：