HTML哈希URL錨定在頁面居中

我想知道如何重寫HASH網址行爲。現在，當我使用＃comment122時，我會在我的頁面上評論122，但它會將＃comment122置於頂端，而li的一半未顯示。這裏有一個例子：HTML哈希URL錨定在頁面居中

<ul> 
    <li><a id="comment122">comment content</a></li> 
    <li><a id="comment123">comment content</a></li> 
</ul>

基本上，我想實現的是我每次訪問一個哈希網址的時候，我需要它來滾動幾個像素越等元素將在頁面中居中。有什麼建議？

來源

2013-10-08 Mo J. Mughrabi

你能給一個鏈接嗎？ – tjons

可能對你有用http://stackoverflow.com/questions/18468170/single-page-navigation-menu-active-indicator/18469201 – Dart

您需要爲此使用JavaScript。如果要居中你的對象在頁面中間讓您元素的第一

var scroll_object = $("#comment122").offset(); 
var scroll_height = scroll_object.top;

CSS的頂級物業，你需要滾動頁面小於對象的實際最高屬性值。

var scroll_height = scroll_height - 300;

以上將滾動設置爲您的元素上方300px。

最後，滾動頁面。

window.scrollBy(0, scroll_height);

該解決方案使用jQuery的:)

來源

2013-10-08 01:43:28

當觸發點擊事件，你需要得到你的高度目標元素（假設你只有垂直滾動），從window.innerHeight和分裂減去它它由兩個。然後你需要從元素相對於窗口頂部的偏移量中減去它。這會給你精確的像素數量來垂直集中屏幕上的元素。

假設你正在使用jQuery，這裏有一個簡單的例子：

$(document).on('click', 'li a', function(e) { 
    e.preventDefault(); 

    var target = $($(this).attr('href')); 

    $('html, body').animate({ 
     scrollTop: target.offset().top - parseInt((window.innerHeight - target.outerHeight())/2, 10) 
    }, 300); 
});

下面是與工作示例小提琴：http://jsfiddle.net/FJBXg/

同樣的邏輯也可以用來攔截加載頁面的哈希在它的URL上，所以你可以將頁面設置爲URL哈希上的元素的動畫。但我會把它留給你。

來源

2013-10-08 02:23:17

HTML哈希URL錨定在頁面居中

回答

相關問題