web-dev-qa-db-fra.com

Jquery Smooth Scroll To DIV - Utilisation de la valeur ID du lien

J'ai donc quelques problèmes avec ma JQuery qui est censée faire défiler vers des divs particuliers.

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

Ce que je veux que le code fasse: sur un événement de clic d'un .searchbychar A TAG> Prenez la valeur des attributs ID et faites défiler jusqu'à cela ...

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

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

});
javascriptjqueryhtmlparsing
21
Jack Tuck

Les identifiants sont censés être uniques, et n'utilisez jamais un identifiant commençant par un nombre, utilisez plutôt des attributs de données pour définir la cible comme suit:

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

Quant à la jquery:

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

Tu peux le faire:

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

F.Y.I.

  • Vous devez préfixer un nom de classe avec un . (point) comme dans votre première ligne de code.
  • $( 'searchbychar' ).click(function() {
  • De plus, votre code $('.searchbychar').attr('id') renverra un ID de chaîne et non un objet jQuery. Par conséquent, vous ne pouvez pas lui appliquer la méthode .offset().
5
palaѕн

Voici ma solution:

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

Avec juste cet extrait, vous pouvez utiliser un nombre illimité de liens de hachage et d'ID correspondants sans avoir à exécuter un nouveau script pour chacun.

J'ai déjà expliqué comment cela fonctionne dans un autre fil ici: https://stackoverflow.com/a/28631803/4566435 (ou voici un lien direct vers mon article de blog )

Pour des éclaircissements, faites le moi savoir. J'espère que ça aide!

3
Bibiano Wenceslao