【代码新玩法】教你微页面内位置跳转

通过点击导航按钮，直接跳转到页面内指定的位置。

1.创建富文本，任意输入文本，这里我们输入“唯港时尚”，按F12进入调试模式

2.ctrl+f，输入刚才输入的文本，按回车键搜索，选到第二次回车的代码位置，鼠标放上去，富文本内会变成选中的样式

3.右键点击代码段，选择【Edit as HTML】，将此段代码替换，背景图片、文本可自行更换，可先将图片上传至有赞，然后复制链接再进行更换（注意：如需要图片作为导航，需将图片设为背景图片，不然点击跳转的时候，同时会将图片点击放大）;图片更换，可先将图片上传至有赞，然后再复制链接替换到代码中标记红色的链接

将链接跳转地址改成<a  herf="#tit1">

文本替换成想要的文本（注意：图片作为背景图片，则文本一定要有）

<section style="background-color: rgb(255, 255, 255); background-size: 100% 80px; background-position: center center; margin: 0px; padding: 0px; height: 80px; overflow: hidden; box-sizing: border-box;">

   <table width="100%" height="80px">

    <tbody>

     <tr class="firstRow">

      <td width="100px" height="50px" align="center" style="border-width: initial; border-style: none; border-color: initial; margin: 0px; padding: 0px; background: url("https://img.yzcdn.cn/upload_files/2017/07/17/FjvkZR3RWLVi28DZKkPg7ECs11a.png") center center / contain no-repeat;"><a href="#tit1" style="display: block; line-height: 80px; color: rgb(51, 51, 51); font-size: 10px; top: 25px; position: relative;">门票</a></td>

      <td width="100px" height="50px" align="center" style="border-width: initial; border-style: none; border-color: initial; margin: 0px; padding: 0px; background: url("https://img.yzcdn.cn/upload_files/2017/07/17/Fq0-eO6GNiR_4NHQdGG51-6Sj2D.png") center center / contain no-repeat;"><a href="#tit2" style="display: block; line-height: 80px; color: rgb(51, 51, 51); font-size: 10px; top: 25px; position: relative;">手工DIY</a></td>

      <td width="100px" height="50px" align="center" style="border-width: initial; border-style: none; border-color: initial; margin: 0px; padding: 0px; background: url("https://img.yzcdn.cn/upload_files/2017/07/17/FtBupF082nsN64QcxWEpOwI3DzwI.png") center center / contain no-repeat;"><a href="#tit3" style="display: block; line-height: 80px; color: rgb(51, 51, 51); font-size: 10px; top: 25px; position: relative;">美食</a></td>

      <td width="100px" height="50px" align="center" style="border-width: initial; border-style: none; border-color: initial; margin: 0px; padding: 0px; background: url("https://img.yzcdn.cn/upload_files/2017/07/17/Fi7cWCEGJqfwCutSyGwyo7EnqXWZ.png") center center / contain no-repeat;"><a href="#tit4" style="display: block; line-height: 80px; color: rgb(51, 51, 51); font-size: 10px; top: 25px; position: relative;">亲子酒店</a></td>

      <td width="100px" height="50px" align="center" style="border-width: initial; border-style: none; border-color: initial; margin: 0px; padding: 0px; background: url("https://img.yzcdn.cn/upload_files/2017/07/17/Fr9RnxRHVTi-2TYuAZYzsMqgmRuL.png") center center / contain no-repeat;"><a href="#tit5" style="display: block; line-height: 80px; color: rgb(51, 51, 51); font-size: 10px; top: 25px; position: relative;">精选商品</a></td>

     </tr>

    </tbody>

   </table>

  </section>

4.再次创建富文本，用相同的方法找到代码位置，找到P标签，右键选择Edit as HTML,在前面的标签内加入代码：id=tit1（可取任意值）；

5.改完后点击其他地方就保存好了

本帖最后由 小黑镜子 于 2017-8-1 11:32 编辑

这技能666，这功能狂拽炫酷吊炸天，然而不只我一个学不会，这要有赞技术团队统一在后台发布这功能方便大家一键开启。。。

肖大思 发表于 2017-8-2 08:38
这技能666，这功能狂拽炫酷吊炸天，然而不只我一个学不会，这要有赞技术团队统一在后台发布这功能方便大家 ...

其实只要有赞能将自定义外链可以将前缀http://可以由用户自己删除就方便很多了

我想加个百度商桥的代码，或者百度量子，能告诉我怎么做到吗？谢谢，具体发我邮箱也可以280560511@qq.com

回到顶部 侧边栏的 代码你忘记加了·  虽然别的帖子有教程

小黑镜子 发表于 2017-8-3 10:04
其实只要有赞能将自定义外链可以将前缀http://可以由用户自己删除就方便很多了 ...

请问下楼主 回到顶部的按钮如何制作的..

参照你的方法改了，要么保存不起，要么就是前面加了个http://，实现不了呀，大哥能提点一下不？

不错，终于可以自己加入BG，以前总是PS好了，一路就是图图图，根本不利于搜索

很厉害的样子哦！

改完后点击其他地方就保存好了……

替换完代码以后，点击了网页上的“保存”，结果再次打开页面，还是之前的文本，是我漏了哪里？

在吗  遇到点问题  请教一下