问题描述一
ul列表中包含多个li行元素，ul的整体高度是固定的，当li过多时、li是隐藏中的，
当你点击其他按键的时候li到指定显示的位置。
完成效果
解决思路
通过JQueryji计算出整个高度后计算li跳转的距离
实现代码
$('#yourUL').scrollTop($('#yourLi').position().top);也可以通过动画的形式完成
$('#yourUL').animate({
scrollTop: $('#yourLi').position().top
}, 800);项目中写的效果代码
$(".jcD-kcml .jcD-choice li").click(function () {
$(this).addClass("jcD-choice-on").siblings().removeClass("jcD-choice-on");
var id = $(this).data('id');
var obj=document.getElementById('location'+id);
var currentTop=$("#list-ul").scrollTop();
var top=$(obj).position().top;
$('#list-ul').animate({
scrollTop: currentTop+top
}, 800,'linear',function(){
$(".jcD-kcml .jcD-choice").slideToggle(200);
});
console.log($(obj).position().top);
});问题描述二
利用ul和li，实现公告条提示的上下轮播滚动。ul和li的高度是一样的。
实现效果
实现代码
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{margin:0;padding:0;}
li{list-style: none;}
.box{width: 200px;height:30px;margin: 100px auto;background-color: #ccc;text-align: center;
overflow: hidden;}
.box li{line-height: 30px;}
</style>
</head>
<body>
<div class="box">
<ul class="ul1" style="position: relative;top: 0;">
<li>滚动1</li>
<li>滚动2</li>
<li>滚动3</li>
<li>滚动4</li>
<li>滚动5</li>
<li>滚动6</li>
</ul>
</div>
<script>
var num = 0;
var ul = document.getElementsByClassName('ul1')[0];
setInterval(function () {
var len = ul.children.length; //总个数
num -= 30; //单个元素高
ul.style.top = num + 'px';
if (ul.style.top.match(/\d+/)[0] >= 30 * (len - 1)) //超出时重置
num = 30;
// $(".ul1").animate({ 'scrollTop': num }, 50) //动画效果
}, 1000);
</script>
</body>
</html>