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