将列表 up/down 滚动到 div
Scroll a list up/down to a div
我有一个列出数字的无序列表。之后,我有一个 div 标签,其中带有左右箭头以指示当前选择的数字。我尝试了以下代码,但它不起作用。
我的要求是,无论何时单击任何数字,列表都应该缓慢滚动 up/down 到 div 和 id="icon"
的位置。我该如何实施?
$('ul li').click(function() {
alert("dfd");
$('html, body').animate({
scrollTop: $("#icon").offset().top
}, 2000);
})
ul {
list-style: none;
}
span {
position: fixed;
top: 50px;
left: 35px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<span id="icon">< ></span>
不要设置 HTML/BODY 的动画,而是尝试按照以下示例设置 UL 的动画。
$('ul li').click(function(){
var index=$(this).index();
var listPosition = -1*index*50;
$('ul').animate({
top: listPosition
}, 600);
})
ul {
list-style:none;
position: fixed;
margin-top: 100px;
}
li{
height: 50px;
line-height: 50px;
}
span{
position:fixed;
top:0;
left:35px;
height: 50px;
line-height: 50px;
margin-top:100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<span id="icon"> < > </span>
我有一个列出数字的无序列表。之后,我有一个 div 标签,其中带有左右箭头以指示当前选择的数字。我尝试了以下代码,但它不起作用。
我的要求是,无论何时单击任何数字,列表都应该缓慢滚动 up/down 到 div 和 id="icon"
的位置。我该如何实施?
$('ul li').click(function() {
alert("dfd");
$('html, body').animate({
scrollTop: $("#icon").offset().top
}, 2000);
})
ul {
list-style: none;
}
span {
position: fixed;
top: 50px;
left: 35px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<span id="icon">< ></span>
不要设置 HTML/BODY 的动画,而是尝试按照以下示例设置 UL 的动画。
$('ul li').click(function(){
var index=$(this).index();
var listPosition = -1*index*50;
$('ul').animate({
top: listPosition
}, 600);
})
ul {
list-style:none;
position: fixed;
margin-top: 100px;
}
li{
height: 50px;
line-height: 50px;
}
span{
position:fixed;
top:0;
left:35px;
height: 50px;
line-height: 50px;
margin-top:100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<span id="icon"> < > </span>