我正在尝试为我的程序使用 scrollTop 函数,但我发现我正在编写大量重复代码。
这是一个例子:
<div id="table_contents >
<ul>
<li id="one"> title One </li>
<li id="two"> title Two </li>
</ul>
</div>
<div id="content">
<p id="target_one"> I am content one </p>
<p id="target_two"> I am content two </p>
</div>
如果我要单击“title One”,我想滚动到“I am content one” 标题二和内容二也是如此。
使用 jQuery/JS 很容易做到这一点
$("#one").click(function() {
$('html, body').animate({
scrollTop: $("#target_one").offset().top -20
}, 800);
});
但举例来说,我的目录中有 15 个元素,我想让每个元素都可点击以滚动到其内容。为此,我必须为每个元素重复上述代码 15 次。
还有比这更好的方法吗?
最佳答案
只需将您的脚本更改为:
方法一
$("#table_contents").on("click","li",function() {
$('html, body').animate({
scrollTop: $("#target_"+$(this).prop('id')).offset().top -20
}, 800);
});
在这个方法中,被点击元素的id
将附加到“target_”,以定位“target id”。 此方法甚至适用于动态添加的 li
元素。
方法二: 没有 ID [但顺序相同]:
$("#table_contents").on("click","li",function() {
$('html, body').animate({
scrollTop: $("#content p").eq($(this).index()).offset().top -20
}, 800);
});
在这个方法中,元素li
的索引映射到p
元素的索引来定位滚动位置。
完成了!!
关于javascript - jQuery/Javascript 代码重复,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25451769/