jQuery: passer à la prochaine <section>

Donc cela devrait être assez simple... et je le fais, mais je voulais vous demander quelques options différentes.

Une option est d'utiliser le "Smooth Scroll" et des noms d'ancre... mais je trouve que, pour être tout à fait incohérent.

C'est ma structure HTML:

<section id="home">
<!-- some content -->
</section>

<section id="about">
<!-- some content -->
</section>

<section id="services">
<!-- some content -->
</section>

...

J'ai quelques "boutons" sur le côté droit de la section et, fondamentalement vous permet de "voyager" vers le haut ou vers le bas à partir de la section de l'article.

  • Et quelle est votre question?
  • Je pensais que c'était évident: "mais je voulais vous demander quelques options différentes." Comme je l'ai dit, je suis en utilisant une option appelée "Smooth Scroll", mais c'est un peu incompatible.
InformationsquelleAutor dcolumbus | 2011-10-26
  1. 5
    jQuery.fn.extend({
  scrollTo : function(speed, easing) {
    return this.each(function() {
      var targetOffset = $(this).offset().top;
      $('html,body').animate({scrollTop: targetOffset}, speed, easing);
    });
  }
});

//Scroll to "about" section
$('#about').scrollTo('fast', 'linear');

    Mise à jour - Pour sauter d'une section à l'utilisation d'un simple gestionnaire d'événement:

    JQuery: 

    $('.next-section').click(function(){
    var $this = $(this),
        $next = $this.parent().next();

    $next.scrollTo($next.offset().top, 500, 'linear');
});

$('.prev-section').click(function(){
    var $this = $(this),
        $prev = $this.parent().prev();

    $prev.scrollTo($prev.offset().top, 500, 'linear');
});

    HTML: 

    <section id="about">
    <a href="#" class="prev-section">Previous Section</a>
    <a href="#" class="next-section">Next Section</a>
    <div class="section-content">
        Foobar
    </div>
</section>

    Voici une démo: http://jsfiddle.net/AlienWebguy/Xdg2k/

    • Merci pour cette... En plus de fixer la fonctionnalité de défilement à un bouton spécifique, j'ai aussi besoin d'être en mesure de simplement faire défiler vers le bas/vers le haut de la page de "<section>" à "<section>"
    • Merci pour le code mis à jour. Il fonctionne très bien, sauf pour le fait qu'il n'est pas à l'aise dans...
    • Il suffit de changer "linéaire" à tout assouplissement vous voulez lol. Inclure JQuery UI pour soutenir d'autres types d'assouplissement: jsfiddle.net/AlienWebguy/Xdg2k/7
    InformationsquelleAutor AlienWebguy
  2. 0

    Regarder dans le scrollTo plugin jQuery, il devrait répondre à vos besoins complètement.

    InformationsquelleAutor Jon
  3. 0

    de sorte que vous êtes désireux de faire défiler la page en fonction sur le lien entre l'utilisateur clique sur?

    de mon expérience, le jQuery.ScrollTo plugin est le meilleur pour cela. Facile à utiliser et beaucoup de soutien

    http://flesler.blogspot.com/2007/10/jqueryscrollto.html

    • oui, mais aussi être capable de faire défiler vers le bas à chaque "<section>"
    InformationsquelleAutor hollandben
  4. 0

    Vous pouvez essayer juste réglage de la scrolltop

    var doc = (document.contentWindow || document).document || document.ownerDocument || document,
    el = ($.browser.webkit) ? doc.body : doc.documentElement;

$(el).scrollTop($('#services').offset().top);
    InformationsquelleAutor ryanb
  5. 0

    J'ai réussi à obtenir un super lisse de défilement à l'aide de mootools pour mon 'retour' ayant pas aimé l'irrégularité de l'jquery ceux. Il travaille également à l'unisson avec les autres jquery sur la page une fois que vous faites un peu de peaufinage.

    http://davidwalsh.name/smooth-scroll-mootools

    Le site je l'utilise sur est actuellement en construction, mais voici le lien http://ggszabo/new/indexb.html

    Cliquez sur la section de rubans de vue.

    InformationsquelleAutor Szabotage