如何使用jquery滚动到具有动态id的元素

Question

我以静态方式完成了这个功能，但是如何使用jquery进行滚动，以便它可以平滑地滚动到我动态添加的id的特定元素。

 var data = [{"name": "Aruba", "code": "A"},{"name": "AndorrA", "code": "A"},{"name": "Bhutan", "code": "B"},{"name": "Bolivia", "code": "B"}] var num=0; $.each(data, function(key, val) { if (!$("#aZContent ul." + val.code).is("*")) { $("<ul />", {"class": val.code,"html": "<li>"+ val.name + "</li>"}).appendTo("#aZContent").before('<b class=' + val.code + ' id="letter_' + num++ + '">' + val.code + '</a></b>'); } else { $("b." + val.code).each(function() { if (this.textContent === val.code) { $(this).next("ul").append("<li>" + val.name + "</li>"); } }); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="alphabet" id="alphaTab"> <a href="#letter_0">A</a> <a href="#letter_1">B</a> </div> <div id="aZContent"> <ul></ul> </div> <div style="height:500px"></div> 

单击链接'A'时，它应滚动到“A”，同样如此

Answer 1

在我的应用程序中，我有一个按钮，每次单击一个按钮时将表单字段集附加到正文 - 我想将页面向下滚动到新元素，但由于jQuery的滚动的冒泡和事件绑定限制，这不起作用职能。 我提出了一个简单的修复...

function scroll(pixels){
    $('html, body').animate({
        scrollTop: pixels
    }, 1000);
};

function addObservation(x){
    $('body').append(x);
    newFieldSet = $('fieldset').last();
    pixelsFromTop = newFieldSet.offset().top;
    scroll(pixelsFromTop);
};

$(document).on("click", "#add_observation", function(){
    addObservation("<fieldset>SOME FORM FIELDS HERE</fieldset>");
});

因此，每次添加.offset().top ，jQuery都会找到最后一个.offset().top ，然后是.offset().top测量.offset().top从顶部开始的像素数，然后平滑地滚动距离的窗口。

Answer 2

我没有得到你的申请。 但它应该很简单。

你说id是“动态的”，这意味着会有动态生成的元素和相应的按钮/链接。

现在你需要做的就是......

让我们说链接的calss是.linksy 。

jQuery(".linksy").on('click', function(){
  e.preventDefault();
  $id = jQuery(this).attr('href');
  $('body').scrollTo('#' + $id);
});