jQuery ScrollTo函数滚动过元素id

Question

我正在设计一个简单的单页网站，它使用顶部的导航菜单滚动到页面的各个点。截至最近，我无法滚动到其中一个页面。当我尝试滚动到我的“关于”部分时，jQuery函数滚过该部分的开头并向下滚动到该部分内第一个元素的顶部。

但是，我需要做的只是在部分（border: 2px dashed yellow）添加边框，并且函数正确滚动到“关于”部分的顶部（并在最顶部显示边框）

这是jQuery函数。我知道这是正确的，因为菜单正常滚动到页面正下方的“联系人”部分。

function scrollTo(element)
{
    var tag = $("#" + element + "");
    $('html, body').animate({scrollTop: tag.offset().top}, 500);
}

我的菜单栏HTML ...

<nav id="menuBar">
    <ul>
        <li><a href="#">Home</a>
        </li><li><a href="#" onclick="alert('This page is still under ' +
                    'construction. Sorry!')">Products</a>
        </li><li><a href="#" onclick="alert('This page is still under ' +
                    'construction. Sorry!')">Projects</a>
        </li><li><a href="#" onclick="scrollTo('aboutSection')">
                About Me</a>
        </li><li><a href="#" onclick="scrollTo('contactSection')">
                Contact Me</a></li>
    </ul>
</nav>

<小时/> 然后是关于

部分的HTML

<section id="aboutSection">
    <section id="aboutContent">
        <!-- Slide show -->
        <section id="aboutSlideShow" class="vCenter">
            <section id="slideHome" class="aboutSlide">
                <img src="images/aboutSlides/aboutHomeSlide.png" alt="About Me Slide">
            </section>
        </section>            
    </section>
</section>

使CSS正常运行的CSS ......

#aboutSection
{
    /* Testing purposes */
    border: 2px dashed yellow;
}

再一次，当我删除最后一行CSS时，jQuery函数滚动到<section>的顶部id="aboutSection"，然后滚动到下一个元素的顶部。

<小时/> 关于

部分的示例

有没有一种简单的方法可以解决这个问题？如果我需要包含其他任何内容，请告诉我。

Answer 1

从您附带的图片中，您指的是＆＃34;应滚动到此处＆＃34;菜单栏/标题底部的箭头，而不是窗口的顶部。这让我相信这可能是菜鸟的一个问题 - 你的窗户的顶部可能被设置在正确的高度，但是菜单栏正在覆盖它。你想要做的是滚动到部分的顶部减去菜单栏高度，这样你想要顶部的点位于导航栏的底部而不是顶部的页：

var tag = $("#" + element + "");
var navHeight = parseInt($('#menuBar').css('height')); 
$('html, body').animate({scrollTop: tag.offset().top - navHeight}, 500);