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

回答

相關問題