多用途网站模板. 如何使用锚链接

Tyler Warren June 8, 2017

Rating: 5.0/5. From 1 vote.

Please wait...

下面的教程将向您展示如何使用锚链接多用途网站模板.

An anchor link (也被称为“页面跳转”链接)是一个页面上的链接，将您带到该页面上的特定位置或不同页面上的特定位置. 当你想带一个 website visitor to a specific spot 在一个页面上，这样他们就不必滚动浏览所有的内容.

让我们学习如何使用它们.

首先，确定 section 你想要你的 website 要见的客人. We will take ‘Portfolio 的模板部分 website 主页为例，向您展示如何创建 anchor link.
使它成为锚 target, we need to add HTML “id” 标记到我们的部分. 代码如下所示:
```
	
	Portfolio Templates
	Showcase any of your products or projects with our great selection of Portfolio
		
		
	
	
```
正如您所看到的，我们添加了一个带有“new”值的“id”标签，因此我们的部分现在可以使用一个 anchor link.
现在我们需要决定链接本身的外观. Basically, 我们可以针对我们的锚与每一种类型的链接可能:常规文本链接, image link, button link, menu item link. 让我们链接按钮:所有其他类型的链接将以相同的方式工作.
我们的按钮默认代码如下:
```
 Start a journey
```
为了让它发挥作用，我们需要替换 ‘#’ in ‘href’ 属性声明用我们的id和a hashtag:
```
Start a journey
```
让我们检查一下:单击按钮后，页面滚动到我们需要的部分.
如果你的模板使用了customWaypoints plugin，您可以创建一个 smooth scroll 使用' data-custom-scroll-to '属性到锚. 在这种情况下，不需要指定' href '属性值，也不需要添加 hashtag:
```
Start a journey
```
It has the same anchor link function，但是滚动效果是平滑的.
如果你想拿你的 website 访问不同页面上特定部分的访问者, 您应该以以下格式指定链接:
```
Start a journey
```
Where http://localhost/ starbis blog-classic.html 你的完整页面的URL和#外部是一个锚与id=“外部”声明的元素.
That’s it. 现在你知道如何在Multipurpose中使用锚链接了 Website Templates.