html - 如何使用页内 HTML 链接滚动到目标部分上方的位置

标签 html hyperlink anchor

我知道如何使用以下方法跳转到页面上的某个部分:

<a href="#link">Link</a>`
<a name="Link">

我的问题是:如何使跳转位置比默认位置高 50px?

当我跳转到该部分时,它基本上不会出现在浏览器的顶部,但会留出一些缓冲空间。

最佳答案

您可以将 padding-top: 50px; 添加到您的目标,但可能会产生意想不到的副作用,即始终在目标上方留有 50px 空间( s).

例子:

HTML:

<a href="#test">Test</a>
<div style="height:1000px"><!-- create some whitespace for demo purposes --></div>

<h1 id="test">Target</h1>
<div style="height:1000px"><!-- create some whitespace for demo purposes --></div>

CSS:

#test { padding-top: 50px; }

DEMO

关于html - 如何使用页内 HTML 链接滚动到目标部分上方的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21914752/

相关文章:

css - :invalid pseudo class not getting set for radio buttons

mysql - mysql查询的字段分隔符内容中的HTML

javascript - 没有 anchor 的可点击链接

html - 超链接标签事件状态不起作用

css - Div anchor 滚动太远

JavaScript 元素属性

javascript - 动态添加的具有给定值的文本框未正确添加,jquery

html - anchor 链接到错误的地方

python - 更改 Sphinx 中的内部链接标签

excel - 如果我后来从其中任何一个中删除了任何超链接,为什么excel会删除所有粘贴的超链接?