jQuery的ScrollTo功能滚动过去的元素ID

我设计一个简单的，一个页面的网站，使用导航菜单顶部滚动到页面的不同点。最近，我无法滚动到其中一个页面。当我尝试滚动到我的“关于”部分时，jQuery函数会滚动到该部分的开头，然后滚动到该部分中第一个元素的顶部。但是，我所需要做的仅仅是为该部分添加边框（border: 2px dashed yellow），并且该功能正确滚动到“关于”部分的顶部（并在顶部显示边框）。jQuery的ScrollTo功能滚动过去的元素ID

这里是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 .. 。

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

再次，如果我删除了CSS的最后一行，jQuery函数滚动过去<section>的顶部id="aboutSection"，并到下一个元素的顶部。大约有部分

Error Example

实例是否有一个简单的方法来解决这一问题？让我知道如果我需要包括其他任何东西。

来源

2015-03-19 Kendall Roth

听起来像是典型的_collapsing margins_问题。 – CBroe 2015-03-19 01:50:51

我也在想崩溃的边缘。我猜你在#aboutContent元素上有一个顶部边距。这里是[jsfiddle]（http://jsfiddle.net/e47d30sq/）。如果您删除小提琴中的边框样式，它会更改它滚动到的位置。 – 2015-03-19 01:53:20

可以做些什么来避免这种情况？ – 2015-03-19 01:54:56

从您的图片包含的，你都指向了“应该滚动至此”箭头在菜单栏/头，而不是窗口顶部的底部。这使我相信这可能是菜单栏的一个问题 - 您的窗口顶部可能被设置在正确的高度，但菜单栏正在覆盖它。你想要做的是滚动到部分的顶部减去菜单栏高度，以便您希望顶部的位置位于导航栏的底部而不是页面的顶部：

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

来源

2015-03-19 18:40:04

jQuery的ScrollTo功能滚动过去的元素ID

回答

相关问题