用div做的下拉框怎么实现按字母跳转到指定的div？_html/css_WEB-ITnose

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script><script type="text/javascript">$(function(){	$(".suoyin  li").click(function(){		var key = $(this).html();		if(key == "全部"){			$(".list li").show();		}else{			$(".list li").hide();			$(".list li[data-key="+key+"]").show();		}	});});</script><style type="text/css">ul,li{margin:0;padding:0;list-style:none;}.box{position:relative;border:1px solid #eee;width:220px;height:350px;overflow-y:scroll;}.suoyin{position:absolute;left:0;top:0;width:20px;height:350px;font-size:12px;line-height:12px;background:#e0e0e0;text-align:center;cursor:pointer;}.suoyin > li:hover{background:#f90;}.list{position:absolute;left:20px;top:0;right:0;width:180px;height:350px;font-size:16px;line-height:20px;}</style><div class="box">	<ul class="suoyin">		<li>A</li><li>B</li><li>C</li><li>D</li><li>E</li><li>F</li><li>G</li>		<li>H</li><li>I</li><li>K</li><li>J</li><li>L</li><li>M</li><li>N</li>		<li>O</li><li>P</li><li>Q</li><li>R</li><li>S</li><li>T</li>		<li>U</li><li>V</li><li>W</li><li>X</li><li>Y</li><li>Z</li><li>全部</li>	</ul>	<ul class="list">		<li data-key='A'>A 奥迪</li>		<li data-key='A'>A 奥迪</li>		<li data-key='A'>A 奥迪</li>		<li data-key='A'>A 奥蒂斯</li>		<li data-key='B'>B 保罗</li>		<li data-key='B'>B 保罗</li>		<li data-key='B'>B 保罗</li>		<li data-key='B'>B 保罗</li>		<li data-key='B'>B 保罗</li>		<li data-key='C'>C 奥迪</li>		<li data-key='C'>C 奥迪</li>		<li data-key='C'>C 奥迪</li>		<li data-key='C'>C 奥迪</li>		<li data-key='D'>D 奥迪</li>		<li data-key='D'>D 奥迪</li>		<li data-key='E'>E 奥迪</li>		<li data-key='F'>F fff</li>		<li data-key='G'>G ggggg</li>	</ul></div>

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script><script type="text/javascript">$(function(){	$(".suoyin  li").click(function(){		var key = $(this).html();		if(key == "全部"){			$(".list li").show();		}else{			$(".list li").hide();			$(".list li[data-key="+key+"]").show();		}	});});</script><style type="text/css">ul,li{margin:0;padding:0;list-style:none;}.box{position:relative;border:1px solid #eee;width:220px;height:350px;overflow-y:scroll;}.suoyin{position:absolute;left:0;top:0;width:20px;height:350px;font-size:12px;line-height:12px;background:#e0e0e0;text-align:center;cursor:pointer;}.suoyin > li:hover{background:#f90;}.list{position:absolute;left:20px;top:0;right:0;width:180px;height:350px;font-size:16px;line-height:20px;}</style><div class="box">	<ul class="suoyin">		<li>A</li><li>B</li><li>C</li><li>D</li><li>E</li><li>F</li><li>G</li>		<li>H</li><li>I</li><li>K</li><li>J</li><li>L</li><li>M</li><li>N</li>		<li>O</li><li>P</li><li>Q</li><li>R</li><li>S</li><li>T</li>		<li>U</li><li>V</li><li>W</li><li>X</li><li>Y</li><li>Z</li><li>全部</li>	</ul>	<ul class="list">		<li data-key='A'>A 奥迪</li>		<li data-key='A'>A 奥迪</li>		<li data-key='A'>A 奥迪</li>		<li data-key='A'>A 奥蒂斯</li>		<li data-key='B'>B 保罗</li>		<li data-key='B'>B 保罗</li>		<li data-key='B'>B 保罗</li>		<li data-key='B'>B 保罗</li>		<li data-key='B'>B 保罗</li>		<li data-key='C'>C 奥迪</li>		<li data-key='C'>C 奥迪</li>		<li data-key='C'>C 奥迪</li>		<li data-key='C'>C 奥迪</li>		<li data-key='D'>D 奥迪</li>		<li data-key='D'>D 奥迪</li>		<li data-key='E'>E 奥迪</li>		<li data-key='F'>F fff</li>		<li data-key='G'>G ggggg</li>	</ul></div>

<style type="text/css">	p{line-height:0px;}	a{text-decoration:none;color:#000000;}	a:hover {color:#FFFFFF;background-color:#FF9933;}	#d .province p a{margin-left:5px;line-height:1px;}	#d .city p a{margin-left:5px;line-height:1px;}	#d .province{border-style:solid; border-width:1px 0px 1px 1px;}	#d .city{border-style:solid; border-width:1px 1px 1px 0px;}</style><script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.8.3.js"></script><script type="text/javascript">function xs() {	if(d.style.display='none')		{		d.style.display='block';				}	else		{		d.style.display='none';		}}var province,city;function GetProvince(obj) {	if(province!=null)	{			province.style.display='none';	}	province=document.getElementById(obj.name);	if(province.style.display='none')	{		province.style.display='block';	}else	{		province.style.display='none';	}}function GetCity(obj) {	city=obj.name;	$("#drop").val("");	$("#drop").val(city);	d.style.display='none';}$(function(){	$("#d .province p a").on("click",function(){	$("#d .province p a").css({"background-color":"#FFFFFF","color":"#000000"});	$(this).css({"background-color":"#FF9933","color":"#FFFFFF"});	});	$("#d .city p a").on("click",function(){	$("#d .city p a").css({"background-color":"#FFFFFF","color":"#000000"});	$(this).css({"background-color":"#FF9933","color":"#FFFFFF"});	});});</script><form><input id="drop"  type="text" value="请选择城市" onfocus=this.blur() style="width:198px;height:22px;font-size:18px;color:#999999;position:relative;z-index:1;background:url(image/4.png) no-repeat;"onclick="xs();"/><div id="d" style="display:none;">	<div  class="province" style="width:100px;height:268px; overflow-y:scroll;float:left;">		<p><a href="javascript:;"  onclick="GetProvince(this)" name="安徽" >安徽      </a></p>	</div>	<div class="city" style="width:100px;height:268px;float:left;overflow-y:auto;">		<div id="安徽" style="display:none;">			<p><a href="javascript:;"  onclick="GetCity(this)" name="合肥" >合肥      </a></p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>			<p><a href="javascript:;"  onclick="GetCity(this)" name="芜湖" >芜湖      </a></p>			<p><a href="javascript:;"  onclick="GetCity(this)" name="蚌埠" >蚌埠      </a></p>			<p><a href="javascript:;"  onclick="GetCity(this)" name="淮南" >淮南      </a></p>			<p><a href="javascript:;"  onclick="GetCity(this)" name="马鞍山" >马鞍山      </a></p>			<p><a href="javascript:;"  onclick="GetCity(this)" name="淮北" >淮北      </a></p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1104">
                            <img src="https://img.php.cn/upload/ai_manual/001/503/042/68b6c5d39a38c971.png" alt="阿里云-虚拟数字人">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1104">阿里云-虚拟数字人</a>
                            <p>阿里云-虚拟数字人是什么？ ...</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="阿里云-虚拟数字人">
                                <span>2</span>
                            </div>
                        </div>
                        <a href="/ai/1104" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="阿里云-虚拟数字人">
                        </a>
                    </div>
                			<p><a href="javascript:;"  onclick="GetCity(this)" name="铜陵" >铜陵      </a></p>			<p><a href="javascript:;"  onclick="GetCity(this)" name="安庆" >安庆      </a></p>			<p><a href="javascript:;"  onclick="GetCity(this)" name="黄山" >黄山      </a></p>			<p><a href="javascript:;"  onclick="GetCity(this)" name="滁州" >滁州      </a></p>			<p><a href="javascript:;"  onclick="GetCity(this)" name="阜阳" >阜阳      </a></p>			<p><a href="javascript:;"  onclick="GetCity(this)" name="宿州" >宿州      </a></p>			<p><a href="javascript:;"  onclick="GetCity(this)" name="巢湖" >巢湖      </a></p>			<p><a href="javascript:;"  onclick="GetCity(this)" name="六安" >六安      </a></p>			<p><a href="javascript:;"  onclick="GetCity(this)" name="亳州" >亳州      </a></p>			<p><a href="javascript:;"  onclick="GetCity(this)" name="池州" >池州      </a></p>			<p><a href="javascript:;"  onclick="GetCity(this)" name="宣城" >宣城      </a></p>		</div>	</div></div></form>