jQuery ScrollTO avec des attributs de données

J'ai vraiment besoin d'aide avec ce problème, mes connaissances en JS n'est pas bon. Donc, fondamentalement, je veux faire défiler jusqu'à la section lorsque le lien est cliqué, mais pas à travers (href="#cible"), je veux le faire avec des attributs. Aussi, je tiens à ajouter un attribut décalage à partir du haut ainsi, si c'est possible. Merci de prendre un coup d'oeil au code, vous obtiendrez une image plus claire.

Exemple de code HTML:

<nav>
    <a href="#" data-attr-scroll="#section1" class="scrollto">Section 1</a>
    <a href="#" data-attr-scroll="#section2" class="scrollto">Section 2</a>
    <a href="#" data-attr-scroll="#section3" class="scrollto">Section 3</a>
    <a href="#" data-attr-scroll="#section4" class="scrollto">Section 4</a>
    <a href="#" data-attr-scroll="#section5" class="scrollto">Section 5</a>
</nav>

<div class="test" id="section1">
    #1 Section
</div>
<div class="test" id="section2" data-scroll-offset="100">
    #2 Section
</div>
<div class="test" id="section3">
    #3 Section
</div>
<div class="test" id="section4" data-scroll-offset="200">
    #4 Section
</div>
<div class="test" id="section5" data-scroll-offset="300">
    #5 Section
</div>

JS exemple:

    jQuery(document).ready(function($) {
        $(".scrollto").click(function(event) {
            event.preventDefault(); 

            var defaultAnchorOffset = 0;

            var $anchor = $(this).attr('data-attr-scroll');

            var anchorOffset = $anchor.attr('data-scroll-offset');
            if (!anchorOffset)
                anchorOffset = defaultAnchorOffset; 

            $('html,body').animate({ 
                scrollTop: $anchor.offset().top - anchorOffset
            }, 500);        
        });
    });

CSS exemple:

    nav {
        position: fixed;
        top: 20px;
        right: 20px;
    }
    .test {
        height: 500px;
    }

Je sais que le code JS est mauvais. Si quelqu'un peut m'aider, je vous serais très reconnaissant.

Vous en remercie d'avance.

Ce qui concerne,
Danny

Violon Démo

OriginalL'auteur Danny | 2014-02-03

  1. 9

    ici, vous allez, id plutôt de prendre une représentation de chaîne de l'id et concatinate le sélecteur, il fonctionne très bien !

        jQuery(document).ready(function($) {
    $(".scrollto").click(function(event) {
        event.preventDefault(); 

        var defaultAnchorOffset = 0;

        var anchor = $(this).attr('data-attr-scroll');

        var anchorOffset = $('#'+anchor).attr('data-scroll-offset');
        if (!anchorOffset)
            anchorOffset = defaultAnchorOffset; 

        $('html,body').animate({ 
            scrollTop: $('#'+anchor).offset().top - anchorOffset
        }, 500);        
    });
});

    je pense qu'il ne fonctionne pas cause vous avez essayé d'effectuer un cast d'un objet à partir d'une chaîne de

    heres un violon, amusez-vous !

    http://jsfiddle.net/JcEb3/1/

    Oh wow John, oui, c'est ce que je voulais faire. Merci beaucoup pour votre aide. Je l'apprécie.
    pas de problème, vous êtes les bienvenus!
    Super réponse, +1 pour l'inclusion de la fonction decaler. Mais il y a une erreur dans votre jsfiddle code. Vous avez utilisé data-scroll-offset dans votre code jQuery, mais il n'y a aucun élément présent dans le Code HTML. Au lieu de cela vous avez utilisé data-anchor-offset dans le Code HTML.

    OriginalL'auteur john Smith