淘宝店铺中锚点跳转失效问题

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2014-12-01 10:38:37　-　阅:　-　评:2　-　积分:0

在讲淘宝店铺中锚点失效问题前，我觉得有必要先普及下基础知识。
1.什么是锚点
2.锚点代码及使用方法
3.淘宝店铺中的锚点代码

1.什么是锚点

锚点经常用到比较长的页面中，由于这些页面内容篇幅较长，如果从上浏览完的话需要很长时间。出于部分人的考虑，有些读者可能只需要阅读他所感兴趣的内容，所以我们会在页面中会设置目录标记，点击标记会快速跳到指定内容位置以节省时间。如图：

这个是淘宝1212主会场的悬浮锚点层。

当然了，在生活中我们也能看到锚点的例子。例如：电梯。电梯里面会有1f-nf这些按钮，当你选择一个按下时，过一会儿电梯就会在对应的楼层打开电梯门。电梯里面的按钮就可以看做是一个锚点，而到达的楼层数则是对应锚点位置的指定内容。

2.锚点代码及使用方法

前面说了锚点的用途了，下面来介绍下锚点代码及使用方法。

通常情况下我们会按照下面的格式来书写锚点：

<a href="#ylsj-8f">点我可快速传送到8楼</a>
<a name="ylsj-8f">我是8楼</a>

上面这串代码表示的意思是：点击锚点可直接传送到8楼对应的内容区，很是方便。需要注意的是：代码中的红色部分是可修改的，并且在修改时要保持一致性！也就是说，前面修改成什么内容，后面就要跟什么内容。

当然了，除了使用name可以直到锚点的效果外还可以使用id来展示同一效果。具体请看下面的一个案例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>淘宝店铺中锚点跳转失效问题--艺灵设计,qq群:231749938</title>
<meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com" />
<meta name="keywords" content="淘宝店铺装修代码,淘宝店铺添加锚点,锚点跳转失效问题,锚点id,淘宝店铺悬浮楼层">
</head>
<body>
<a href="#ylsj-8f">点我可快速传送到8楼</a>
<div style="width:80%;height:8000px"></div>
<a id="ylsj-8f">我是8楼</a>
<p>大家好，我是8楼，此处省略一万字......</p>
<div style="width:80%;height:8000px"></div>
</body>
</html>

怎么样，同样达到效果了吧。但是，现在问题来了。如果我同时使用name和id，那结果会是怎么样的呢？

啊！头痛的问题，那谁又开始抬头45度角仰望天空了......

哎！让我说什么好呢？动手测试下不就知道了吗？！源码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>锚点中的name与id同时存在时--艺灵设计,qq群:231749938</title>
<meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com" />
<meta name="keywords" content="淘宝店铺装修代码,淘宝店铺添加锚点,锚点跳转失效问题,锚点id,淘宝店铺悬浮楼层">
</head>
<body>
<a href="#ylsj-8f">点我可快速传送到8楼</a>
<div style="width:80%;height:4000px"></div>
<a name="ylsj-8f">我是name 8楼</a>
<div style="width:80%;height:4000px"></div>
<a id="ylsj-8f">我是id 8楼</a>
<p>大家好，我是id 8楼，此处省略一万字......</p>
<div style="width:80%;height:8000px"></div>
</body>
</html>

此时我们可以看到点击后直接跑到了有id的位置，而那个name的却不曾定位。说到这里，我想不禁起了选择器的优先级关系：id>class......

由上面这个案例我们可以初步得出结论：id比name好使！不服来辨！

3.淘宝店铺中的锚点代码

不知何时起，淘宝店铺中的锚点如同段誉的“六脉神剑”一样，时而灵时而不灵的，苦惑了不少美工。既然刚讲到了id，那何不用id试试看呢？！

说到id，又有人开始吐槽了：你不知道淘宝屏蔽id呀！还让我用，怎么用，你说吧！

好吧，我只能说那些人不知道举一反三。我敢肯定问这个问题的人对于淘宝的全屏框架原理一定是不了解的，而且很可能连修改值都不会！

早都说过了，你要学会姑苏慕容家的绝学---斗转星移，你偏是不听。来放一张图吧：

由于在淘宝店铺里面每新建一个“自定义内容区”时，系统都会给此模块添加一个唯一的id，例如上面的shop8656702712，这里我们想跳到这个模块时就可以按照下面的方法写代码了：

<a href="A#shop8656702712">这里是自己的内容</a>

上面红色部分为修改部分，至于这个红色的A是可有可无。如果是想跳转到本页面，A就不用要了；如果是想跳转至其它页面，A就是其它页面的网址。

上面这串代码兼容性良好，适用于天猫店铺、淘宝店铺以及外网平台。

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/code/2014-12-01/229.html
若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！