Jquery Smooth Scroll To DIV - Sử dụng giá trị ID từ Link

Question

Vì vậy, tôi đang gặp một số vấn đề với JQuery của tôi, đó là giả sử để cuộn đến các div cụ thể.

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

gì tôi muốn mã để làm là: Khi được nhấp trường hợp xảy ra .searchbychar Một TAG> Chụp ID thuộc tính giá trị và di chuyển đến đó. ..

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

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

}); 

Answer 1

Id có nghĩa là duy nhất, và không bao giờ sử dụng một id mà bắt đầu với một số, sử dụng dữ liệu thuộc tính thay vì để thiết lập các mục tiêu như sau:

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

Đối với 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

Bạn có thể thực hiện việc này:

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

F.Y.I.

• Bạn cần phải thêm tiền tố một tên lớp với một . (dot) như trong dòng đầu tiên của bạn mã.
• $('searchbychar').click(function() {
• Ngoài ra, mã của bạn $('.searchbychar').attr('id') sẽ trả lại ID chuỗi không phải là đối tượng jQuery. Do đó, bạn không thể áp dụng phương thức .offset() cho nó.

Answer 3

đây là giải pháp của tôi:

<!-- jquery smooth scroll to id's --> 
<script> 
$(function() { 
    $('a[href*=\\#]:not([href=\\#])').click(function() { 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
     if (target.length) { 
     $('html,body').animate({ 
      scrollTop: target.offset().top 
     }, 500); 
     return false; 
     } 
    } 
    }); 
}); 
</script> 

chỉ với đoạn này, bạn ca n sử dụng số lượng không giới hạn các liên kết băm và các id tương ứng mà không phải thực thi một tập lệnh mới cho mỗi.

Tôi đã giải thích như thế nào nó hoạt động trong một thread ở đây: https://stackoverflow.com/a/28631803/4566435 (hoặc đây là một direct link to my blog post)

Đối với giải thích, cho tôi biết. Hy vọng nó giúp!