我创建了一个表,其中包含从ajax调用中获取的值,每个表都有一个带有data-id属性的锚标记。
此外,我使用相同的值动态创建了一个时间轴视图(默认情况下隐藏),并且有一个scrollview - 因为有1000个事件。
当用户点击锚标记时,如何在时间轴中移动到该特定的li元素并隐藏表格。
function create_table(data) {
var tr = $('<tr>');
$.each(data, function(idx, ele) {
tr.append("<<td><p><a class='details' data-id='" + data['id'] + "href=" + data['link'] + "> Link </a></p></td>")
}
$('tbody').append(tr);
}
function create_time(data) {
var ul = $("<ul>");
$.each(data, function(idx, ele) {
ul.append("<li id=" + data['id'] + "><div>" +
data['player_name'] + "</div></li>");
}
$(".vertical-timeline").append(ul)
}
$("a.details").on("click", function(e) {
e.preventDefault();
$(".player_div").hide();
$(".player_timeline").show();
// MOVE TO PARTICULAR LI
});
CSS
.player_timeline {
height: 700 px;
margin - bottom: 100 px;
}
.vertical - timeline {
overflow - y: scroll;
height: 500 px;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="player-div">
<table class="table table-responsive">
<tbody>
</tbody>
</table>
</section <section class="player_timeline" style="display:none;">
<div class="vertical-timeline">
</div>
</section>
&#13;
答案 0 :(得分:1)
假设您正在使用jQuery,您可以附加这样的事件
$("a.details").on("click", function(e){
e.preventDefault();
$(".player_div").hide();
$(".player_timeline").show();
$('html, body').animate({
scrollTop: $(".player_timeline").offset().top
}, 2000);
$(".player_timeline").animate({
scrollTop: $('li to scroll').offset().top
}, 2000);
});
让我知道它是否适合你。
答案 1 :(得分:0)
$("a.details").on("click", function(e){
e.preventDefault();
$(".player_div").hide();
$(".player_timeline").show();
var id = $(this).attr("data-id");
$('html,body').animate({ scrollTop: $("li #" + id).offset().top - 1000 }, 'slow');
});
希望上面的代码可以帮助你。