我正在努力清理我的锚的工作方式。我有一个固定在页面顶部的标题，因此当您链接到页面其他位置的锚点时，页面会跳转，因此锚点位于页面顶部，将内容留在固定标题后面（我希望这就说得通了）。我需要一种方法来将锚点从标题的高度偏移 25 像素。我更喜欢 HTML 或 CSS，但 Javascript 也可以接受。
偏移 html 锚点以调整固定标题
IT技术
javascript
html
css
anchor
offset
2021-02-01 05:56:45
6个回答
您可以只使用 CSS 而不使用任何 javascript。
给你的主播上课：
<a class="anchor" id="top"></a>
然后，您可以通过将锚定为块元素并对其进行相对定位，将锚定为比它实际出现在页面上的位置高或低的偏移量。-250px 将定位点向上 250px
a.anchor {
display: block;
position: relative;
top: -250px;
visibility: hidden;
}
我找到了这个解决方案：
<a name="myanchor">
<h1 style="padding-top: 40px; margin-top: -40px;">My anchor</h1>
</a>
这不会在内容中造成任何差距，锚链接的效果非常好。
我也在寻找解决方案。就我而言，这很容易。
我有一个包含所有链接的列表菜单：
<ul>
<li><a href="#one">one</a></li>
<li><a href="#two">two</a></li>
<li><a href="#three">three</a></li>
<li><a href="#four">four</a></li>
</ul>
下面是它应该去的标题。
<h3>one</h3>
<p>text here</p>
<h3>two</h3>
<p>text here</p>
<h3>three</h3>
<p>text here</p>
<h3>four</h3>
<p>text here</p>
现在，因为我的页面顶部有一个固定菜单，所以我不能让它进入我的标签，因为它会在菜单后面。
相反，我在我的标签中放置了一个具有正确 id 的 span 标签。
<h3><span id="one"></span>one</h3>
现在使用 2 行 CSS 来正确定位它们。
h3{ position:relative; }
h3 span{ position:absolute; top:-200px;}
更改顶部值以匹配固定标题（或更多）的高度。现在我假设这也适用于其他元素。
由于这是一个演示问题，纯 CSS 解决方案将是理想的。然而，这个问题是在 2012 年提出的，虽然已经提出了相对定位/负边距的解决方案，但这些方法似乎相当笨拙，会产生潜在的流量问题，并且无法动态响应 DOM/视口的变化。
考虑到这一点，我相信使用 JavaScript仍然是（2017 年 2 月）最好的方法。下面是一个 vanilla-JS 解决方案，它将响应锚点点击并在加载时解析页面哈希（参见 JSFiddle）。.getFixedOffset()如果需要动态计算，请修改方法。如果您使用 jQuery，这里有一个改进的解决方案，它具有更好的事件委托和平滑滚动。
(function(document, history, location) {
var HISTORY_SUPPORT = !!(history && history.pushState);
var anchorScrolls = {
ANCHOR_REGEX: /^#[^ ]+$/,
OFFSET_HEIGHT_PX: 50,
/**
* Establish events, and fix initial scroll position if a hash is provided.
*/
init: function() {
this.scrollToCurrent();
window.addEventListener('hashchange', this.scrollToCurrent.bind(this));
document.body.addEventListener('click', this.delegateAnchors.bind(this));
},
/**
* Return the offset amount to deduct from the normal scroll position.
* Modify as appropriate to allow for dynamic calculations
*/
getFixedOffset: function() {
return this.OFFSET_HEIGHT_PX;
},
/**
* If the provided href is an anchor which resolves to an element on the
* page, scroll to it.
* @param {String} href
* @return {Boolean} - Was the href an anchor.
*/
scrollIfAnchor: function(href, pushToHistory) {
var match, rect, anchorOffset;
if(!this.ANCHOR_REGEX.test(href)) {
return false;
}
match = document.getElementById(href.slice(1));
if(match) {
rect = match.getBoundingClientRect();
anchorOffset = window.pageYOffset + rect.top - this.getFixedOffset();
window.scrollTo(window.pageXOffset, anchorOffset);
// Add the state to history as-per normal anchor links
if(HISTORY_SUPPORT && pushToHistory) {
history.pushState({}, document.title, location.pathname + href);
}
}
return !!match;
},
/**
* Attempt to scroll to the current location's hash.
*/
scrollToCurrent: function() {
this.scrollIfAnchor(window.location.hash);
},
/**
* If the click event's target was an anchor, fix the scroll position.
*/
delegateAnchors: function(e) {
var elem = e.target;
if(
elem.nodeName === 'A' &&
this.scrollIfAnchor(elem.getAttribute('href'), true)
) {
e.preventDefault();
}
}
};
window.addEventListener(
'DOMContentLoaded', anchorScrolls.init.bind(anchorScrolls)
);
})(window.document, window.history, window.location);
FWIW这对我有用：
[id]::before {
content: '';
display: block;
height: 75px;
margin-top: -75px;
visibility: hidden;
}