淘美科技

    在html代码中，<a> 标签可定义锚。锚 (anchor) 有两种用法：通过使用 href 属性，创建指向另外一个文档的链接（或超链接）
通过使用 name 或 id 属性，创建一个文档内部的书签（也就是说，可以创建指向文档片段的链接）
    注意：淘宝装修中过滤了“id”属性。

    创建命名锚点（简称锚点）就是在文档中设置位置标记，并给该位置一个名称，以便引用。通过创建锚点，可以使链接指向当前文档或不同文档中的指定位置。锚点常常被用来跳转到特定的主题或文档的顶部，使访问者能够快速浏览到选定的位置，加快信息检索速度。 

    创建锚点链接，首先要设置一个命名锚点（<a name="taomeizhuli">），然后建立到命名锚点的链接（<a  href="#taomeizhuli">）。
当页面包含了很长的内容时，我们就能通过这个方法十分方便的跳转到特定的字段（模块）。

——————————————————————————————————————————————————————————
下面，我们结合淘宝美工助理或者天猫美工王工具来演示一个实例。

首先登录淘宝美工助理，我们随便选择一个自定义模块特效。
 


以旺铺专业版——格子代码——三图反暗亮模块为例，打开工具后，点击生成并复制。
 


这样，我们就生成了代码，并将代码复制到了剪辑版中。

打开记事本或者sublime text编辑器，将代码粘贴到编辑器里。
 


在这个特效代码的首部，加上这样一句：<a name="taomeizhuli001"></a>
 


复制全部代码，粘贴到淘宝后台的自定义模块中。
 


粘贴后直接点击确定按钮，不要切换到普通模式。

————————————————————————————————————————————————————————

接下来，我们用ps设计一个分类导航条。
 


在 Dreamweaver 里给这张图片添加热点链接。我们可以看到，这张图有5个链接。
假设我们需要点击第一个导航文字，跳转到刚才我们制作的三图反暗亮模块上，那么我们就把第一个的链接，指向为#taomeizhuli001即可。
目标为“_self”，如下图：
 



剩下的工作就很简单了：
将图片上传到淘宝的图片空间，在dw中替换图片地址。
然后复制body中间的代码，粘贴到淘宝的自定义模块中。
点击第一个导航文字，就会自动跳转到三图反暗亮模块。

---------------------------------------------------------------------------------------------------------------------------------------
补充说明：

    现在淘宝的页面加载方式是按需加载。比如你只看一个店铺首页的头部，它就只加载头部，下面的图片是不加载的，只有你滚动条拖到下面的时候，才加载。也就是说，如果下面的页面打开后没有加载锚就检测不到，锚点跳转就会失效。

    淘宝采用这种加载方式是为了给淘宝的服务器省资源，为了节省在同一时间访问淘宝服务器造成的拥堵，另一方面给我们带来的困扰是锚点定位的失效。

    例如，我们在首页的头部加一个链接，其链接的定位到本页下方的某个锚点。

    页面做成功后，我们在头部点击那个链接，问题就来了，由于是按需加载，这时候下方的所有代码均未加载，锚点自然没有检测到，也就是说，点击头部链接没有反应，链接不到锚点。

    这个时候把滚动条拖动一下，把整个首页的地方都浏览个遍，让代码加载一遍，然后再回到头部，锚点定位的链接才生效。

    因此，不推荐在店铺装修中使用锚点跳转。