如何滚动到使用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("*")) { 
 
\t  $("<ul />", {"class": val.code,"html": "<li>"+ val.name + "</li>"}).appendTo("#aZContent").before('<b class=' + val.code + ' id="letter_' + num++ + '">' + val.code + '</a></b>'); 
 
\t } else { 
 
\t \t $("b." + val.code).each(function() { 
 
\t \t  if (this.textContent === val.code) { 
 
\t \t \t \t $(this).next("ul").append("<li>" + val.name + "</li>"); 
 
\t \t \t } 
 
\t  }); 
 
\t } 
 
});

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

在点击链接的 'A' 应该滚动至 “A”，同样

Answer 1

一些答案已经给出。希望这会帮助你。

Pass dynamic id value jquery div jump to function

On menu clicked --> animate & scroll to the element dynamically

Scroll to a div using jquery

Answer 2

在我的应用程序，我有一个按钮，每一个按钮被点击时附加形式的fieldsets的身体 - 我想页面向下卷动至新元素，但由于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>"); 
}); 

所以每次添加一个字段时，发现jQuery的最后一个，然后.offset().top措施的字段集多少像素从顶部，然后平稳地滚动窗口，距离。

Answer 3

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

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

现在，所有你需要做的是..

可以说该链接的CALSS是.linksy。 。

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