無(wú)腦直接拿代碼可用
demo示例
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Scroll to Top Example</title>
<style>
.city-list-container {
height: 300px;
/* 根據(jù)需要設(shè)置高度 */
position: relative;
}
.city-list {
position: absolute;
top: 0;
left: 0;
}
.alphabet {
position: absolute;
top: 0;
right: 0;
padding: 10px;
}
</style>
</head>
<body>
<div class="city-list-container city-list" style="overflow: auto; width: 92%;">
<div class="">
<!-- 城市列表 -->
<div class="city" data-initial="A">
<p>aaaaaaaaaaaaaaaaaaaaaaaaa</p>
<p>1111111111111111111111111111</p>
<p>1111111111111111111111111111</p>
<p>1111111111111111111111111111</p>
<p>1111111111111111111111111111</p>
<p>1111111111111111111111111111</p>
<p>1111111111111111111111111111</p>
<p>1111111111111111111111111111</p>
<p>1111111111111111111111111111</p>
</div>
<div class="city" data-initial="B">
<p>bbbbbbbbbbbbbbbbbbbb</p>
<p>2222222222222222</p>
<p>1111111111111111111111111111</p>
<p>1111111111111111111111111111</p>
<p>1111111111111111111111111111</p>
<p>1111111111111111111111111111</p>
<p>1111111111111111111111111111</p>
<p>2222222222222222</p>
<p>2222222222222222</p>
</div>
<div class="city" data-initial="C">
<p>ccccccccccccccccccccccc</p>
<p>333333333333333333</p>
<p>333333333333333333</p>
<p>333333333333333333</p>
<p>333333333333333333</p>
<p>333333333333333333</p>
<p>333333333333333333</p>
<p>333333333333333333</p>
</div>
<div class="city" data-initial="D">
<p>dddddddddddddddddddddddd</p>
<p>444444444444444444</p>
<p>444444444444444444</p>
<p>444444444444444444</p>
<p>444444444444444444</p>
<p>444444444444444444</p>
<p>444444444444444444</p>
<p>444444444444444444</p>
<p>444444444444444444</p>
<p>444444444444444444</p>
<p>444444444444444444</p>
<p>444444444444444444</p>
<p>444444444444444444</p>
<p>444444444444444444</p>
</div>
<div class="city" data-initial="E">
<p>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</p>
<p>55555555555555555555555555555555555</p>
<p>55555555555555555555555555555555555</p>
<p>55555555555555555555555555555555555</p>
<p>55555555555555555555555555555555555</p>
<p>55555555555555555555555555555555555</p>
<p>55555555555555555555555555555555555</p>
<p>55555555555555555555555555555555555</p>
<p>55555555555555555555555555555555555</p>
<p>55555555555555555555555555555555555</p>
<p>55555555555555555555555555555555555</p>
<p>55555555555555555555555555555555555</p>
</div>
</div>
</div>
<div class="alphabet">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
<div>G</div>
<div>H</div>
<div>I</div>
<div>J</div>
<div>K </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
var cityList = $('.city-list');
var cityElements = cityList.find('.city'); // 假設(shè)每個(gè)城市有一個(gè)class為city
var alphabet = $('.alphabet');
alphabet.on('click', 'div', function () {
var char = $(this).text();
var targetCity = cityElements.filter('[data-initial=' + char + ']');
console.log(targetCity.offset().top)
if (targetCity.length) {
cityList.animate({
scrollTop: targetCity.offset().top - cityList.offset().top + cityList.scrollTop()
}, 'slow');
}
});
});
</script>
</body>
</html>
