HTML中的锚点答案

【问题标题】：Anchor points in HTMLHTML中的锚点
【发布时间】：2019-01-29 23:41:58
【问题描述】：

在编码网站方面我相当基础，但我想将锚点合并到我的水平滚动网站中。我试过了，但没有用。

以下是我尝试过的代码 - 我不确定这是否与我的导航栏不是标准的 <li> 有关，而是我使用单独的 div。我将附上我如何设计网站的图片，以便您理解这个概念。

HTML：

<div id="navbar">
    <div class="tab1" href="#home">
        <div class="text1">Home</div>
    </div>
    <div class="tab2" href="#work">
        <div class="text2">Work</div>
    </div>
    <div class="tab3" href="#about">
        <div class="text3">About</div>
    </div>
</div>

<div id="container">

  <div id="fullscreen">

    <div class="box home" id="home">

    <div class="heading">
        <h1>Hi,</h1>
        <h2>I'm Nathan Wilson</h2>
        <h3>a Graphic Designer based in Nottingham, U.K.</h3>
    </div>

    </div>

    <div class="box work" id="work">

    </div>
    <div class="box about" id="about">

    </div>
  </div>
</div>

图片：https://imgur.com/fh6hq3O

我想最终加入平滑滚动，但一旦我解决了这个问题，我就会考虑这一点。

【问题讨论】：

为了平滑滚动，你需要 JS。对于水平锚滚动，也许this 有帮助？免责声明：我不是作者。
如果你想要一个锚，使用an anchor element...

标签： html css anchor anchor-scroll

【解决方案1】：

锚点工作由于属性绑定标签元素如下

<a href="#anchor-point-1">Where You Click!</a> 

<a name="anchor-point-1"></a>

所以#anchor-point-1 是绑定到锚标记名称的属性元素，您可以将其垂直或水平放置在标记中的任何位置，具体取决于您应用的样式。

您可以为模板之类的标签执行多个锚标记，如下所示

<a href="#anchor-point-tab-1">Where You Click!</a> 

<a name="anchor-point-tab-1"></a> 

<a href="#anchor-point-tab-2">Where You Click!</a> 

<a name="anchor-point-tab-2"></a>

只要您的原始链接和锚点具有相同的绑定元素 HREF = 相同的 NAME 属性，您将标签命名为什么都没关系。

您还可以将元素绑定到 div、span 和其他标签以实现这些类型的视觉和滚动效果

对于内部锚定属性

创建功能性超链接需要了解三个锚属性。这些属性是 href、target 和 download。

这些也被视为锚点，但不会将一个标签绑定到另一个标签！

Anchor 1: mailto:
<a href="mailto:contact@anchor.com">

Anchor 2: tel:
<a href="tel:5551239876">make call (555)123-9876</a>

Anchor 3: target="_blank"
<a href="https://test.com" target="_blank">

要了解 A href 标签的所有属性的动态和内部工作，请访问下面的链接。

https://html.com/anchors-links/

希望这就足够了！

【讨论】：

【解决方案2】：

你做得对，只是你必须使用<a> balise 而不是<div>

<a class="tab1" href="#home">
    <div class="text1">Home</div>
</a>

【讨论】：

【解决方案3】：

你很接近。而不是将<div> 包装在<div class="tab1" href="#home"> 中，您需要使用锚标记<a href="#">Test</a>。试试这个。

<div id="navbar">
	<div class="tab1">
		<a href="#home" class="text1">Home</a>
	</div>
	<div class="tab2">
		<a href="#work" class="text2">Work</a>
	</div>
	<div class="tab3">
		<a href="#about" class="text3">About</a>
	</div>
</div>

<div id="container">

	<div id="fullscreen">

		<div class="box home" id="home">

			<div class="heading">
				<h1>Hi,</h1>
				<h2>I'm Nathan Wilson</h2>
				<h3>a Graphic Designer based in Nottingham, U.K.</h3>
			</div>

		</div>

		<div class="box work" id="work">
			Work Content
		</div>
		<div class="box about" id="about">
			About Content
		</div>
	</div>
</div>

【讨论】：