Realmente necesito ayuda con este problema, mi conocimiento con JS no es bueno. Así que, básicamente quiero desplácese hasta la sección cuando se hace clic en el enlace, pero no a través de (href=»#destino»), quiero hacerlo con atributos. Además, quiero añadir el atributo de desplazamiento de la parte superior, como también si es posible. Por favor, echa un vistazo a el código, usted va a obtener una imagen más clara.

HTML Ejemplo:

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

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

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

Sé que el código JS es malo. Si alguien me puede ayudar, le estaría muy agradecido.

Gracias de antemano.

Saludos,
Danny

El Violín Demo

InformationsquelleAutor Danny | 2014-02-03

1 Comentario

  1. 9

    aquí tienes, prefiero tomar una representación de cadena de la identificación y concatinate el selector, funciona 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);        
        });
    });

    creo que no funciona causa que trató de convertir un objeto a partir de una cadena

    heres un violín, ¡diviértete !

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

    • Ay Juan, sí, eso es lo que yo quería hacer. Muchas gracias por su ayuda. Se los agradezco.
    • no hay problema, eres bienvenido!
    • Gran respuesta, +1 para la inclusión de desplazamiento de la función. Pero hay un error en su jsfiddle código. Usted ha utilizado data-scroll-offset en su código jQuery, pero no hay ningún elemento con esto en el Código HTML. En lugar de haber usado data-anchor-offset en el Código HTML.

Dejar respuesta

Please enter your comment!
Please enter your name here