Défilement lisse à la prochaine classe de l'élément jquery

Je veux préparer une lisse scrooling effet entre les titres à l'aide de html et jQuery. En appuyant sur le bouton "suivant", l'utilisateur est déplacé vers le plus proche, le titre suivant.

Simplifier mon code ressemble à ça:

<div class="article-content">
    <div class="title">
        <a href="#" id="next">next</a>
        <h2>Title1</h2>
    </div>        
       some text goes here        
    <div class="title">
        <a href="#" id="next">next</a>
        <h2>Title2</h2>
    </div>      
    <div class="title">
        <a href="#" id="next">next</a>
       <h2>Title3</h2>
    </div>      
</div>

J'ai essayé d'utiliser le jQuery, le code ci-dessous, mais ça ne fonctionne pas:

$("#next").click(function() {
      var next;
      next = $(this).parent().next().find(".title");
       $('html,body').animate({ scrollTop: next.offset().top
            }, 1000);
});

Vous ne pouvez pas avoir plus d'un élément dans la même page avec le même id. Vous devez utiliser data-id ou class pour distinguer votre "prochain" des liens.
Il pourrait y avoir un conflit. Plutôt que d'utiliser des id, essayez d'assigner la classe de ces boutons.
oh oui 🙂 j'ai ajouté une classe pour le lien, mais il stll ne fonctionne pas :/

OriginalL'auteur Sebastian Miecielica | 2014-07-22

2

Démo

en html changement de l'id de classe
```
<div class="title">
    <a href="#" class="next">next</a>
    <h2>title5</h2>
</div>
```
en javascript
```
$(".next").click(function() {
   $('html,body').animate({ scrollTop:$(this).parent().next().offset().top}, 'slow');});
```
---Mise à jour

vous avez eu un problème dans votre mise à jour que vous avez utilisé la

en dehors de la div de sorte que le jquery ne peuvent pas l'obtenir.

il devrait en être ainsi
```
<div class="title">
<a href="#" class="next">next</a>
<h2>title1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mauris augue, molestie sit amet eros ac, tempus euismod justo. Donec faucibus sapien et lacus blandit sodales vitae vitae orci. Pellentesque aliquam suscipit purus. Fusce quis urna non arcu congue vulputate quis quis nunc. Praesent erat libero, porta eget lorem vitae, pretium sollicitudin felis. Pellentesque ultrices cursus lectus vel sodales. Fusce sodales ac dolor vel pretium. Nullam suscipit euismod nisi eu ullamcorper. Mauris consectetur urna accumsan nulla convallis, nec sagittis est faucibus. Nulla quis consectetur velit.
```
mise à jour

Il fonctionne! Savez-vous comment le changer en "bouton précédent"? En changeant juste à côté() dans prev()?
Veuillez post question distincte pour la même chose. Merci
Oui, il pourrait travailler en changeant juste pour prev, mais je vous recommande de changer le nom de la classe d'à Côté en quelque chose d'autre juste pour le sac de cohérence
J'ai mis à jour votre jsFiddle - mise à jour - le fichier avec du texte et j'ai remarqué qu'il ne fonctionne pas correctement maintenant. Est-il une option pour résoudre ce problème?
d'abord, vous devez mettre à jour votre question, la question afin que je puisse y répondre et les gens n'ont pas à passer par de commentaire, seconde, il est vraiment impoli de décocher la question parce que vous voulez quelque chose de nouveau, vous trouverez la réponse dans la mise à jour en réponse.

OriginalL'auteur oqx
0

Ce code peut vous aider à
```
$('html,body').animate({ scrollTop: $(".title").offset().top}, 'slow');
```
merci, mais j'ai besoin de quelque chose, que le travail avec plus de 10 titre des éléments. Votre code ne fonctionne que lorsque j'ai un lien.
foreach lien, vous définissez une fonction comme ceci $("#link1").click(function(){ // code that scrolls }); et définir d'autres fonctions pour link2 link3 ...
Je sais que je peux le faire de cette façon, mais c'est trop de code, il doit être à la version courte. J'ai trouvé un peu de code ici lien mais cela ne fonctionne pas sur ma page web.
poster votre code sur jsFiddle afin que je puisse vous aider
jsFiddle

OriginalL'auteur Khalid
0

De défilement en douceur à particules div, utilisez le code ci-dessous:
```
$("a").on('click', function(e) {
  //prevent default anchor click behavior
  e.preventDefault();
  $('html, body').animate({
    scrollTop: $(this.hash).offset().top
  }, 1000, function() {
    window.location.hash = this.hash;
  });
});
```
Veuillez également observé récemment ajouté id pour le titre div et href emplacement du lien dans l'exemple ci-dessous la démo.

DÉMO ICI

Espère que cela permettra de résoudre votre problème.

est-il une option pour le faire sans ajouter 'id' pour le prochain titre?

OriginalL'auteur byJeevan

Vous devez vous connecter pour publier un commentaire.