Question

在对网站进行编码时，我非常基础，但是我想将锚点合并到我的水平滚动网站中。我已经走了，但是没有用。

下面是我尝试过的代码-我不确定这与我的导航栏是否不是标准<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

我最终希望加入平滑滚动，但这是我修复此问题后要考虑的问题。

Answer 1

锚点的工作归因于按如下方式绑定标记元素的属性

nextUntil()

因此＃anchor-point-1是绑定到定位标记名称的属性元素，您可以根据自己的样式来在垂直或水平放置标记中的任何位置。

您可以对模板之类的标签执行以下多个定位标记

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

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

只要您的原始链接和锚点具有相同的绑定元素HREF =相同的NAME属性，那么命名标签的名称就无关紧要。

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

用于内部锚定属性

创建功能超链接需要了解三个锚属性。这些属性是href，目标和下载。

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

<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>

要了解A href标记的所有属性的动态性和内部工作原理，请转到下面的链接。

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

希望这足够了！

Answer 2

您做对了，只是您必须使用<a>扶手代替<div>

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

Answer 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>

HTML中的锚点

3 个答案: