点击a标签，跳转到同一页面的指定内容，类似于点击按钮回到页面顶部效果

方式一：

这个效果实现方式很简单，只需要在a标签href内填上id名，在内容标签内加入id="名"便可。

下面是实现效果图

点击这个a标签

便可跳转到这个页面底下的文本框内容部分

以下是HTML代码，可以提供参考

<div class="shopping">
<h1>购物须知</h1>
<ul>
        <li class="hover">
        <!--#model是下面内容div块的id名-->
                <a href="#model">xx商品</a>
        </li>
        <li>
                <a href="#model2">xx价格</a>
        </li>
        <li>
                <a href="#model3">xx周期</a>
        </li>
        <li>
                <a href="#model4">xx快递</a>
        </li>
        <li>
                <a href="#model5">售后相关</a>
        </li>
</ul>

<div class="shopping_commodity">
<!--id="model对应上面的名字，这样才能实现效果-->
        <div class="commodity1" id="model">
                <h3>xx商品</h3></div>
        <span>

                <p >预定商品：非现货的商品，为确保供货数量以及避免过量囤积，因此将通过收取预定金的形式进行把控，且无论是哪种形式的预定商品，预定金一旦支付成功，均不予以退还，敬请周知。

        <br/>如预定商品为全款预定金商品，那么商品正式发行后，则会直接发货；

        <br/>如预定商品为定额预定金商品（众筹预定），那么商品正式发行后，则需再补充支付尾款。如若不支付尾款，预定金则不予以退还。

        <br/>*预定金是指商品正式发行前夕，预定购买时所支付的一定数额的金钱作为担保。

        <br/>预定商品的预定金分为全款预定金和定额预定金两种形式。</p>
        </span>
        <div class="commodity2" id="model2">
                <h3>xx价格</h3></div>
        <span>
                <p>商城发售的海外专辑的全款价格内包含专辑定价+国际邮费+关税+增值税+审批费用，不含国内邮费。。

        <br/>如专辑为众筹预定商品，则专辑发行后会短信通知补款，补款成功后同步计入专辑销量（韩国专辑计入Hanteo Chart销量榜）。</p>
        </span>
        <div class="commodity3" id="model3">
                <h3>xx周期</h3></div>
        <span>

                <p>补充说明：

<br/>商城发售的海外进口专辑均为预售专辑；

<br/>进口外文原版专辑需要报批审核，并加贴「国家专用进口防伪标识」贴纸。审核周期约为20个工作日，因需用实体专辑报批，所以在专辑正式发行后才可递交报批材料。

<br/>另外，国际运输+中国海关开箱验货+通关周期约为2周左右。

<br/>预售海外专辑预计将于专辑正式发售后40个工作日内发货。当专辑发行时间与法定假日冲撞时，则会进行顺延，具体时间将根据当时情况另行通知。

<br/>（此为参考时间，发货时间以实际情况为准）</p>
        </span>

        <div class="commodity4" id="model4">
                <h3>xx快递</h3></div>
        <span>					
                <p>订购众筹商品时暂不需要支付邮费，商品补款时支付国内邮费。

<br/>全款预定订单下单时支付国内运费。

<br/>邮费计算说明：


<br/>商城委托第三方快递公司为客户提供送货服务，客户无须向快递公司支付额外的费用。客户可在商城“我的订单”查询货物配送信息，也可以登录第三方快递网站查询快递信息。

<br/>注意：港澳台地区的用户下单后需联系商城QQ客服补运费后才能正常发货。

<br/>下单时请在留言区备注可以联系上的QQ，若没有QQ，请留下邮箱地址，以便工作人员与您取得联系。</p>
        </span>

        <div class="commodity5" id="model5">
                <h3>售后相关</h3></div>
        <span>					
                <p>商品售出后，如无质量问题不予退换，<b>不接受如不喜欢、和想象的不一样、有色差</b>等主观因素的退换要求。

<br/>快递签收后7日内，如出现非人为因素的损坏，或密封包装内的商品有缺失等质量问题，需提供电子订单，商品和快递外包装完整图片，联系音悦商城售后客服进行退、换货。

<br/>如因商城的原因出现少发、漏发等情况，可联系商城客服凭商城购物订单号确认后进行补发；如出现发错件的情况，可在保持专辑包装完好、不影响二次销售的状态下，进行更换，已拆封的音像制品将无法受理退、换货，请您谅解。

<b style="color: red;">缺失商品的补发、损坏商品换货的邮费</b>均由商城承担。

<br/>要进行退、换货时，需将退、换商品寄回，请您先垫付寄回运费，后联系商城客服进行退邮费。寄回商品时请发普通快递，不要使用顺丰到付，否则将拒收，退邮费上限为15元，超出部分将由您自己承担，敬请谅解


<br/>请您一定要当快递员的面拆件检查货品是否完好后再行签收。如有破损请不要签收，并交与快递员原件退回。

<br/>如未检查就签收包裹而引发问题，商城将无法为您向快递索赔，造成的损失将由买方承担。

<b>请您一定保证收货信息正确，联系电话畅通。如因买家原因，快递公司人员未能与买家联系到，导致无法正常收货或货品退回出现的商城二次发货，需要买家补款二次邮费。</b>
</p>
        </span>
</div>
</div>

方式二：

经常在维基百科等网站看到目录列表，点击链接会跳到具体的位置，小美眉一直在问是怎么做到的，其实挺简单的，用A标签实现页面内容定位就行了。实例参考微信营销理论手册的目录。 首先用A标签定义目录的链接。

方法如下：

1、同一页面添加锚点：

连接到本页面的锚的超链接   //点击的连接

锚   //放到要跳转内容的地方

2、跨页面添加锚点：

（1）在test2.html创建锚锚

（2）在test.html设置好连接连接到另外页面的锚的超链接

 　　保存，刷新，测试一下，点击目录链接是不是可以跳到那个位置了？用A标签实现页面内容定位，点击链接就能跳到具体位置，简单吧？

　　w3school对【HTML 链接 - name 属性】的定义

name 属性规定锚（anchor）的名称。 您可以使用 name 属性创建 HTML 页面中的书签。 书签不会以任何特殊方式显示，它对读者是不可见的。 当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。