我在一个div中有一个UL，在另一个div中有一个a-z列表。当我单击一个字母时，例如列表将跳转到以d开头的第一个项目。
我已经大致工作了，但需要一些帮助来解决这些问题。它并不总是去我正在寻找的项目。如果我点击w例如它跳转到m，如果我再次点击它跳转到j。如果我一直点击w，它将在m和j之间来回跳转。它似乎更糟糕，因为它走向列表的底部。我需要使用className，而不是id，因为这是一个自动生成的列表。任何帮助将非常感激。我是javascript的新手，无法弄明白。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="file:///c:/media/jquery-3.1.1.min.js"></script>
<style>
#container {width: 100%;}
#leftbox {float: left; width: 30%;}
#rightbox {float: right; width: 60%; border: solid 1px #000000; height:
200px; overflow: scroll;}
</style>
</head>
<body>
<div id="container">
<div id="leftbox">
<a class="playalpha" href="a">A</a>
<a class="playalpha" href="b">B</a>
<a class="playalpha" href="c">C</a>
<a class="playalpha" href="d">D</a>
<a class="playalpha" href="e">E</a>
<a class="playalpha" href="f">F</a>
<a class="playalpha" href="g">G</a>
<a class="playalpha" href="h">H</a>
<a class="playalpha" href="i">I</a>
<a class="playalpha" href="j">J</a>
<a class="playalpha" href="k">K</a>
<a class="playalpha" href="l">L</a>
<a class="playalpha" href="m">M</a>
<a class="playalpha" href="n">N</a>
<a class="playalpha" href="o">O</a>
<a class="playalpha" href="p">P</a>
<a class="playalpha" href="q">Q</a>
<a class="playalpha" href="r">R</a>
<a class="playalpha" href="s">S</a>
<a class="playalpha" href="t">T</a>
<a class="playalpha" href="u">U</a>
<a class="playalpha" href="v">V</a>
<a class="playalpha" href="w">W</a>
<a class="playalpha" href="x">X</a>
<a class="playalpha" href="y">Y</a>
<a class="playalpha" href="z">Z</a>
<script type="text/javascript">
$('.playalpha').click(function (e) {
e.preventDefault();
var letter = $(this).attr('href');
//scroll to first h1.name element that begins with "letter"
var target = $('.play').filter(function () {
return $.trim($(this).text()).toLowerCase().indexOf(letter) == 0
});
$('html,body,div').animate({scrollTop: $(target).offset().top}, 400);
});
</script>
</div>
<div id="rightbox">
<ul>
<li class="play">a1</li>
<li class="play">a2</li>
<li class="play">a3</li>
<li class="play">b1</li>
<li class="play">b2</li>
<li class="play">b3</li>
<li class="play">c1</li>
<li class="play">c2</li>
<li class="play">c3</li>
<li class="play">d1</li>
<li class="play">d2</li>
<li class="play">d3</li>
<li class="play">e1</li>
<li class="play">e2</li>
<li class="play">e3</li>
<li class="play">f1</li>
<li class="play">f2</li>
<li class="play">f3</li>
<li class="play">g1</li>
<li class="play">g2</li>
<li class="play">g3</li>
<li class="play">h1</li>
<li class="play">h2</li>
<li class="play">h3</li>
<li class="play">i1</li>
<li class="play">i2</li>
<li class="play">i3</li>
<li class="play">j1</li>
<li class="play">j2</li>
<li class="play">j3</li>
<li class="play">k1</li>
<li class="play">k2</li>
<li class="play">k3</li>
<li class="play">l1</li>
<li class="play">l2</li>
<li class="play">l3</li>
<li class="play">m1</li>
<li class="play">m2</li>
<li class="play">m3</li>
<li class="play">n1</li>
<li class="play">n2</li>
<li class="play">n3</li>
<li class="play">o1</li>
<li class="play">o2</li>
<li class="play">o3</li>
<li class="play">p1</li>
<li class="play">p2</li>
<li class="play">p3</li>
<li class="play">q1</li>
<li class="play">q2</li>
<li class="play">q3</li>
<li class="play">r1</li>
<li class="play">r2</li>
<li class="play">r3</li>
<li class="play">s1</li>
<li class="play">s2</li>
<li class="play">s3</li>
<li class="play">t1</li>
<li class="play">t2</li>
<li class="play">t3</li>
<li class="play">u1</li>
<li class="play">u2</li>
<li class="play">u3</li>
<li class="play">v1</li>
<li class="play">v2</li>
<li class="play">v3</li>
<li class="play">w1</li>
<li class="play">w2</li>
<li class="play">w3</li>
<li class="play">x1</li>
<li class="play">x2</li>
<li class="play">x3</li>
<li class="play">y1</li>
<li class="play">y2</li>
<li class="play">y3</li>
<li class="play">z1</li>
<li class="play">z2</li>
<li class="play">z3</li>
</ul>
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
这是解决方案。
使用＆＃39; #id＆＃39;
尝试href无需使用javascript / jQuery。
https://jsfiddle.net/mmghori/9y1saarc/
<body>
<div id="container">
<div id="leftbox">
<a class="playalpha" href="#a">A</a>
<a class="playalpha" href="#b">B</a>
<a class="playalpha" href="#c">C</a>
<a class="playalpha" href="#d">D</a>
<a class="playalpha" href="#e">E</a>
<a class="playalpha" href="#f">F</a>
<a class="playalpha" href="#g">G</a>
<a class="playalpha" href="#h">H</a>
<a class="playalpha" href="#i">I</a>
<a class="playalpha" href="#j">J</a>
<a class="playalpha" href="#k">K</a>
<a class="playalpha" href="#l">L</a>
<a class="playalpha" href="#m">M</a>
<a class="playalpha" href="#n">N</a>
<a class="playalpha" href="#o">O</a>
<a class="playalpha" href="#p">P</a>
<a class="playalpha" href="#q">Q</a>
<a class="playalpha" href="#r">R</a>
<a class="playalpha" href="#s">S</a>
<a class="playalpha" href="#t">T</a>
<a class="playalpha" href="#u">U</a>
<a class="playalpha" href="#v">V</a>
<a class="playalpha" href="#w">W</a>
<a class="playalpha" href="#x">X</a>
<a class="playalpha" href="#y">Y</a>
<a class="playalpha" href="#z">Z</a>
</div>
<div id="rightbox">
<ul>
<li id="a" class="play">a1</li>
<li class="play">a2</li>
<li class="play">a3</li>
<li id="b" class="play">b1</li>
<li class="play">b2</li>
<li class="play">b3</li>
<li id="c" class="play">c1</li>
<li class="play">c2</li>
<li class="play">c3</li>
<li id="d" class="play">d1</li>
<li class="play">d2</li>
<li class="play">d3</li>
<li id="e" class="play">e1</li>
<li class="play">e2</li>
<li class="play">e3</li>
<li id="f" class="play">f1</li>
<li class="play">f2</li>
<li class="play">f3</li>
<li id="g" class="play">g1</li>
<li class="play">g2</li>
<li class="play">g3</li>
<li id="h" class="play">h1</li>
<li class="play">h2</li>
<li class="play">h3</li>
<li id="i" class="play">i1</li>
<li class="play">i2</li>
<li class="play">i3</li>
<li id="j" class="play">j1</li>
<li class="play">j2</li>
<li class="play">j3</li>
<li id="k" class="play">k1</li>
<li class="play">k2</li>
<li class="play">k3</li>
<li id="l" class="play">l1</li>
<li class="play">l2</li>
<li class="play">l3</li>
<li id="m" class="play">m1</li>
<li class="play">m2</li>
<li class="play">m3</li>
<li id="n" class="play">n1</li>
<li class="play">n2</li>
<li class="play">n3</li>
<li id="o" class="play">o1</li>
<li class="play">o2</li>
<li class="play">o3</li>
<li id="p" class="play">p1</li>
<li class="play">p2</li>
<li class="play">p3</li>
<li id="q" class="play">q1</li>
<li class="play">q2</li>
<li class="play">q3</li>
<li id="r" class="play">r1</li>
<li class="play">r2</li>
<li class="play">r3</li>
<li id="s" class="play">s1</li>
<li class="play">s2</li>
<li class="play">s3</li>
<li id="t" class="play">t1</li>
<li class="play">t2</li>
<li class="play">t3</li>
<li id="u" class="play">u1</li>
<li class="play">u2</li>
<li class="play">u3</li>
<li id="v" class="play">v1</li>
<li class="play">v2</li>
<li class="play">v3</li>
<li id="w" class="play">w1</li>
<li class="play">w2</li>
<li class="play">w3</li>
<li id="x" class="play">x1</li>
<li class="play">x2</li>
<li class="play">x3</li>
<li id="y" class="play">y1</li>
<li class="play">y2</li>
<li class="play">y3</li>
<li id="z" class="play">z1</li>
<li class="play">z2</li>
<li class="play">z3</li>
</ul>
</div>
</div>
</body>