Question

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

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

我的问题是：如何将跳转位置设置为默认值的50px？

基本上这样做，当我跳到该部分时，它并不完全出现在浏览器的顶部，但允许一些缓冲空间。

Answer 1

您可以向目标添加padding-top: 50px;，可能会产生意外的副作用，即始终在目标上方有50px个空间。

示例：

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

Answer 2

对于解决问题的干净代码，请在“之前”使用CSS：

<style>
#link:before{
padding-top:50px;display:block;content:"";
}
</style>

<a href="#link">Link</a>
<div id="link">content</div>

Answer 3

如何使用这样的CSS

HTML

<a name="Link" class="link1">

CSS

.link1 {
  padding-top: 50px;
}

Answer 4

您可以创建一个超链接，通过添加字段的相关名称将光标放在页面上的表单字段中。只需添加前面的尖锐字符即可。

http://hyperlink#sms_recipient

此链接转到该页面，并将焦点放在手机号码字段上。访问者可以立即输入号码并点击发送。

Answer 5

我发现此解决方案最有效，因为它允许您在目标部分上方添加一些填充，而无需增加元素之间的间距。

在元素上方添加一个不可见的<div>，然后通过调整相对位置将其向上移动。

<style>
#section{
    position: relative;
    left: 0px; 
    top: -90px; /* Adjust this */
}
</style>

<div id="#section"></div> 
<div>content</div>

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

5 个答案: