如何滾動到使用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); 
});