我有一个名为mypage的drupal页面,我想从该页面导航到另一个页面div,我为此使用了定位标记,但它仍将转到另一个页面(样本发行页面)的顶部。
我拥有的代码:mypage:
<div class="anchors" id="anchors-0">
<span>sample page</span>
<ul>
<li><a href="https://mysite.dd:6123/sample-issue#anchor-0">issue1</a>
</li>
<li><a href="https://mysite.dd:6123/sample-issue#anchor-1">issue2</a>
</li>
</ul>
</div>
样本页面:
<div class="content-area">
<div class="field field--name-field-section-title field--type-string field--label-hidden field--item"><a name="anchor-0"></a>issue1</div>
<div class="field field--name-field-text field--type-text-long field--label-hidden field--item"><p>issue 1 summary.</p>
</div>
</div>
<div class="content-area">
<div class="field field--name-field-section-title field--type-string field--label-hidden field--item"><a name="anchor-1"></a>issue2</div>
<div class="field field--name-field-text field--type-text-long field--label-hidden field--item"><p>issue 2 summary.</p>
</div>
</div>
.container {
width: 80%;
margin: 0 auto;
}
.bg-blue {
background-color: blue;
color: white;
height: 100vh;
}
.bg-violet {
background-color: blueviolet;
color: white;
height: 110vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example Navigation</title>
</head>
<body>
<a href="#violet-div">Goto Violet Div</a>
<div class="container bg-blue" id="blue-div">
<p>Blue Div</p>
</div>
<div class="container bg-violet" id="violet-div">
<p>Blue Violet Div</p>
</div>
</body>
</html>
上面的代码片段是您要实现的示例。您应该在标签中提供要导航到的ID of the Div
。<a href="#violet-div">Goto Violet Div</a>
显然,div应该具有相同的ID。<div class="container bg-violet" id="violet-div"></div>
在您的特定情况下,它将是:
mypage:
<div class="anchors"> <span>sample page</span> <ul> <li> <a href="https://mysite.dd:6123/sample-issue#anchor-0">issue1</a> </li> <li> <a href="https://mysite.dd:6123/sample-issue#anchor-1">issue2</a> </li> </ul> </div>
sample-issue:
<div class="content-area"> <div class="field field--name-field-section-title field--type-string field--label-hidden field--item" id="anchor-0"> <p>issue1</p> </div> <div class="field field--name-field-text field--type-text-long field--label-hidden field--item"> <p>issue 1 summary.</p> </div> </div> <div class="content-area"> <div class="field field--name-field-section-title field--type-string field--label-hidden field--item" id="anchor-1"> <p>issue2</p> </div> <div class="field field--name-field-text field--type-text-long field--label-hidden field--item"> <p>issue 2 summary.</p> </div> </div>