Jquery Smooth Scroll To DIV - 使用Link中的ID值

Question

所以我的JQuery存在一些问题,我想滚动到特定的div.

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的

我想要的代码是:在.searchbychar的点击事件A TAG>获取ID属性值并滚动到那...

$( '.searchbychar' ).click(function() {

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

});

Answer 1

ID应该是唯一的,并且永远不会使用以数字开头的id,而是使用数据属性来设置目标,如下所示:

<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>

至于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

你可以这样做:

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

FYI

• 您需要在第一行代码中使用.(点)前缀类名称.
• $( 'searchbychar' ).click(function() {
• 此外,您的代码$('.searchbychar').attr('id')将返回字符串ID而不是jQuery对象.因此,您无法对其应用.offset()方法.