使用固定頂欄滾動到ID

我的頁面有一個固定的頂部導航欄，在頁面上有幾個ID元素。如果我按下這些id元素中的一個鏈接，它會將這個ID滾動到頂部，但它隱藏在頂部導航欄下。在野外，頁面很長，並且有不同的「jumppoints」。使用固定頂欄滾動到ID

我a simplified fiddle to show the problem與下面的HTML

<div id="fixedbar">This is the fixed top bar</div> 
<div id="toplinks"><a href="#first">First</a> <a href="#second">Second</a></div> 
<p id="first"><strong>First</strong> 
    Lorem ipsum dolor sit amet[...] 
</p> 
<p id="second"><strong>Second</strong> 
    Duis autem vel eum iriure dolor[...] 
</p> 
<div id="bottomlinks"><a href="#first">First</a> <a href="#second">Second</a></div>

和這個CSS

body{padding:0;margin:0} 
#toplinks{padding-top:2em} 
#fixedbar{ 
    position:fixed; 
    background-color:#ccc; 
    height:2em; 
    width:100% 
}

我想要的鏈接向右滾動元素的點擊，但補充了固定的導航欄。一個可能的解決方案應該最好只包括CSS，但可以包括JavaScript或jQuery（1.9是用於生產）。

謝謝你的幫助！

來源

2013-02-28 Bastian Rang

下面是針對此問題的JavaScript解決方法。將點擊事件綁定到頂部鏈接和底部鏈接中的<a>，單擊事件查找目標<p>偏移量，然後使用javascript滾動到該值。

$("#toplinks, #bottomlinks").on('click','a', function(event){ 
    event.preventDefault(); 
    var o = $($(this).attr("href")).offset(); 
    var sT = o.top - $("#fixedbar").outerHeight(true); // get the fixedbar height 
    // compute the correct offset and scroll to it. 
    window.scrollTo(0,sT); 
});

小提琴：http://jsfiddle.net/AnmJY/1/

來源

2013-02-28 15:54:54 Derek

+ 1用於計算固定欄高度，而不是使用近似值/猜測值。完整性=） – Raad 2013-02-28 16:06:45

感謝這工作就像一個魅力。我將頭部改爲'$（'a [href^=「＃」]'）。on（'click keyup'，'but but your answer is the missing hint for me。 – 2013-02-28 16:11:26

感謝您調整我的代碼，Raad。歡迎，Bastian Rang =] – Derek 2013-02-28 16:32:01

你可以作弊一點點。

http://jsfiddle.net/vyPkA/

body{padding:0;margin:0} 
#toplinks{padding-top:2em; margin-bottom: -40px;} 
#fixedbar{ 
    position:fixed; 
    background-color:#ccc; 
    height:2em; 
    width:100%; 
} 
#first, #second{ 
    padding-top: 40px; 
}

來源

2013-02-28 15:48:33 DanC

填充打破了頁面上的其他元素的佈局。所以這不起作用:( – 2013-02-28 15:52:36

改性JS：

$("#toplinks a").click(function() { 
    var id = $(this).attr('href'); 
    $('html, body').animate({   
     scrollTop: $(id).offset().top-40 
    }, 1000); 
});

改性CSS：

body{padding:0;margin:0} 
#toplinks{padding-top:2em} 
#fixedbar{ 
    position:fixed; 
    background-color:#ccc; 
    height:40px; 
    width:100% 
}

小提琴：http://jsfiddle.net/xSdKr/

40（PX）是菜單高度，1000是以毫秒爲單位的時間來執行動畫。

JS解決方案遠比純CSS更優雅，主要是因爲它保留了元素而沒有任何可能干擾您網站樣式的人爲填充。它還包含動畫 - 人們通常會發現平滑過渡比單純使用CSS/HTML的即時翻轉更容易接受，因爲它們可以更輕鬆地跟蹤頁面內容和您的確切位置。缺點是如果有人在URL中使用#first - 他會看到菜單與標題重疊。

來源

2013-02-28 15:52:57 MarcinWolny

感謝您的建議，我嘗試和修改，但德里克回答做了這項工作。 – 2013-02-28 16:10:14

使用固定頂欄滾動到ID

回答

相關問題