Jquery Smooth Scroll To DIV - Using ID value from Link

Question

So i'm having some issues with my JQuery which is suppose to scroll to particular divs.

HTML

<div id="searchbycharacter">     <a class="searchbychar" href="#" id="#0-9" onclick="return false">0-9 |</a>      <a class="searchbychar" href="#" id="#A" onclick="return false"> A |</a>      <a class="searchbychar" href="#" id="#B" onclick="return false"> B |</a>      <a class="searchbychar" href="#" id="#C" onclick="return false"> C |</a>      ... Untill Z </div>  <div id="0-9">     <p>some content</p> </div>  <div id="A">     <p>some content</p> </div>  <div id="B">     <p>some content</p> </div>  <div id="C">     <p>some content</p> </div>  ... Untill Z 

JQuery

What i want the code to do is: On click event of an .searchbychar A TAG > Take the ID attributes value and scroll to that...

$( '.searchbychar' ).click(function() {      $('html, body').animate({         scrollTop: $('.searchbychar').attr('id').offset().top     }, 2000);  }); 

Answer 1

Ids are meant to be unique, and never use an id that starts with a number, use data-attributes instead to set the target like so :

<div id="searchbycharacter">     <a class="searchbychar" href="#" data-target="numeric">0-9 |</a>      <a class="searchbychar" href="#" data-target="A"> A |</a>      <a class="searchbychar" href="#" data-target="B"> B |</a>      <a class="searchbychar" href="#" data-target="C"> C |</a>      ... Untill Z </div> 

As for the jquery :

$(document).on('click','.searchbychar', function(event) {     event.preventDefault();     var target = "#" + this.getAttribute('data-target');     $('html, body').animate({         scrollTop: $(target).offset().top     }, 2000); }); 

Answer 2

You can do this:

$('.searchbychar').click(function () {     var divID = '#' + this.id;     $('html, body').animate({         scrollTop: $(divID).offset().top     }, 2000); }); 

F.Y.I.

• You need to prefix a class name with a . (dot) like in your first line of code.
• $( 'searchbychar' ).click(function() {
• Also, your code $('.searchbychar').attr('id') will return a string ID not a jQuery object. Hence, you can not apply .offset() method to it.