How to scroll to an element which has dynamic id using jquery

Question

I have done this functionality in a static way but how can i do this scroll using jquery so that it will smoothly scroll to the particular element which id i have added dynamically.

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>

On Click of link 'A' it should scroll to the "A" and likewise

you can replace all the else with `$("b." + val.code).next("ul").append("
@crl i have done that scroll in a static way how can i do a smooth scrolling to the element using jquery — Manas Ranjan Pradhan, Jun 22 '15 at 03:30
Static way? do you mean with #hash-id? So you want to replace that with your custom way to scroll? Can I ask why? — caub, Jun 22 '15 at 10:26
@crl when i am trying to implement this prototype in actual Application it will not work as i am using prevent default. Thats why i need to do it in a custom way to scroll using jquery. — Manas Ranjan Pradhan, Jun 22 '15 at 16:31

score 0 · Answer 1 · answered Aug 10 '16 at 15:56

In my app, I have a button that appends form fieldsets to the body every time a button is clicked - I wanted to scroll the page down to the new element, but that didn't work due to bubbling and event binding limitations of jQuery's scrolling functions. I came up with a simple fix...

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>");
});

So every time you add a fieldset, jQuery finds the last one, then .offset().top measures how many pixels the fieldset is from the top and then smoothly scrolls the window that distance.

score 0 · Answer 2 · answered Aug 10 '16 at 16:09

I didn't quite get your application. But it should be simple.

You say the ids are "dynamic", which means that there will be elements dynamically generated and the respective buttons/links.

Now all you need to do is..

lets say the calss of the links is .linksy.

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

How to scroll to an element which has dynamic id using jquery

2 Answers2