添加填充頂用的href時要滾動=「＃ID」

我有一個錨標記，如下所示：添加填充頂用的href時要滾動=「＃ID」

<a href="#map_4D85448A3D4C4180A02BD6FC387ABC45" onclick="jumptosection('map_4D85448A3D4C4180A02BD6FC387ABC45');">A Guide</a>

它導航到具有ID「map_4D85448A3D4C4180A02BD6FC387ABC45」一節。這個功能如下：

function jumptosection(id) { 
    var target = document.getElementById(id); 
    if(document.all){ 
     document.documentElement.scrollTop = target.offsetTop; 
    }else{ 
     var top = 0; 
     do { 
      top += target.offsetTop || 0; 
      target = target.offsetParent; 
     } while(target); 

     document.body.scrollTop = top ; 
    } 
    //$('#article').css.paddingTop = '55px'; 
    return false;

但是即使我在這個函數中什麼也沒寫，行爲仍然是一樣的。問題是我有一個92px的標題欄，當我點擊給定的定位點時隱藏了該部分的一部分。我如何讓它滾動到給定的部分，而添加一些像素來逃避頭部？

來源

2016-06-28 CodingIsComplex

您還沒有表現出你的代碼的重要部分 - jumptosection（）函數 - 所以我不能給你一個例子，但你只需要從頂部位置減去標題條的高度的元素被跳轉到。 –

@RoryMcCrossan每個解決方案都不需要代碼。如果用戶禁用了js，問題仍然存在。 – eisbehr

這是可能的。我會做沒有JavaScript，所以它適用於所有。甚至不需要對您的JS進行任何更改。

您只需要在要滾動到的元素上方創建一個空元素。 CSS做到了這一點。它在你的高度創建一個隱藏的盒子偏移：

HTML：

<span class="anchor" id="map_4D85448A3D4C4180A02BD6FC387ABC45"></span> 
<h1>Element to scroll to</h1>

CSS：

.anchor { 
    display: block; 
    height: 92px; 
    margin-top: -92px; 
    visibility: hidden; 
}

看到這裏工作演示： https://jsfiddle.net/eczxm1rs/1/

來源

2016-06-28 07:07:08 eisbehr

非常感謝@eisbehr。這工作完美:) – CodingIsComplex

不客氣！然後將其標記爲成功。 ;） – eisbehr

添加填充頂用的href時要滾動=「＃ID」

回答

相關問題