javascript - página - jquery desplazamiento suave a un ancla?

smooth scroll

Question

¿Hay alguna manera de desplazarse hacia abajo a un enlace de anclaje usando jQuery?

Me gusta:

$(document).ready(function(){
  $("#gotomyanchor").click(function(){
      $.scrollSmoothTo($("#myanchor"));
  });
});

?

Answer 1

Aquí está el código que utilicé para vincular rápidamente jQuery scrollTo a todos los enlaces de anclaje:

// Smooth scroll
$(''a[href*=#]'').click(function () {
    var hash = $(this).attr(''href'');
    hash = hash.slice(hash.indexOf(''#'') + 1);
    $.scrollTo(hash == ''top'' ? 0 : ''a[name=''+hash+'']'', 500);
    window.location.hash = ''#'' + hash;
    return false;
});

Answer 2

Así es como lo hago:

    var hashTagActive = "";
    $(".scroll").on("click touchstart" , function (event) {
        if(hashTagActive != this.hash) { //this will prevent if the user click several times the same link to freeze the scroll.
            event.preventDefault();
            //calculate destination place
            var dest = 0;
            if ($(this.hash).offset().top > $(document).height() - $(window).height()) {
                dest = $(document).height() - $(window).height();
            } else {
                dest = $(this.hash).offset().top;
            }
            //go to destination
            $(''html,body'').animate({
                scrollTop: dest
            }, 2000, ''swing'');
            hashTagActive = this.hash;
        }
    });

Entonces solo necesitas crear tu ancla como esta:

<a class="scroll" href="#destination1">Destination 1</a>

Puedes verlo en mi sitio web .
Una demostración también está disponible aquí: http://jsfiddle.net/YtJcL/

Answer 3

La mejor solución que he visto hasta ahora: jQuery: Smooth Scrolling Internal Anchor Links

HTML:

<a href="#comments" class="scroll">Scroll to comments</a>

Guión:

jQuery(document).ready(function($) {
    $(".scroll").click(function(event){     
        event.preventDefault();
        $(''html,body'').animate({scrollTop:$(this.hash).offset().top}, 500);
    });
});

Answer 4

Odio agregar clases con nombre de función a mi código, así que lo puse en su lugar. Si dejara de usar el desplazamiento suave, me sentiría obligado a revisar mi código, y eliminar todas las cosas de clase = "desplazamiento". Usando esta técnica, puedo comentar 5 líneas de JS, y todo el sitio se actualiza. :)

<a href="/about">Smooth</a><!-- will never trigger the function -->
<a href="#contact">Smooth</a><!-- but he will -->
...
...
<div id="contact">...</div>


<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
    // Smooth scrolling to element IDs
    $(''a[href^=#]:not([href=#])'').on(''click'', function () {
        var element = $($(this).attr(''href''));
        $(''html,body'').animate({ scrollTop: element.offset().top },''normal'', ''swing'');
        return false;
    });
</script>

Requisitos :
1. <a> elementos deben tener un atributo href que comience con # y sea más que solo #
2. Un elemento en la página con un atributo id correspondiente

Que hace:
1. La función usa el valor href para crear el objeto anchorID
- En el ejemplo, es $(''#contact'') , /about comienza con /
2. HTML y BODY están animados para el desplazamiento superior de anchorID
- speed = ''normal'' (''rápido'', ''lento'', milisegundos,)
- easing = ''swing'' (''lineal'', etc ... google easing)
3. return false : impide que el navegador muestre el hash en la URL
- La secuencia de comandos funciona sin ella, pero no es tan " suave ".

Answer 5

Prueba este. Es un código de trucos de CSS que modifiqué, es bastante sencillo y realiza desplazamientos tanto verticales como horizontales. Necesita JQuery. Aquí hay una demo

$(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-10, scrollLeft:target.offset().left-10
        }, 1000);
        return false;
      }
    }
  });
});

Answer 6

Quería una versión que funcionara para <a href="#my-id"> y <a href="/page#my-id">

<script>        
    $(''a[href*=#]:not([href=#])'').on(''click'', function (event) {
        event.preventDefault();
        var element = $(this.hash);
        $(''html,body'').animate({ scrollTop: element.offset().top },''normal'', ''swing'');
    });
</script>

Answer 7

Utilicé el plugin Smooth Scroll , en http://plugins.jquery.com/smooth-scroll/ . Con este complemento, todo lo que necesita incluir es un enlace a jQuery y al código del complemento:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="javascript/smoothscroll.js"></script>

(los enlaces deben tener la clase smoothScroll para que funcione).

Otra característica de Smooth Scroll es que el nombre de ancor no se muestra en la URL.

Answer 8

Utilizando el script de hanoo, creé una función jQuery:

$.fn.scrollIntoView = function(duration, easing) {
    var dest = 0;
    if (this.offset().top > $(document).height() - $(window).height()) {
        dest = $(document).height() - $(window).height();
    } else {
        dest = this.offset().top;
    }
    $(''html,body'').animate({
        scrollTop: dest
    }, duration, easing);
    return this;
};

uso:

$(''#myelement'').scrollIntoView();

Los valores predeterminados para la duración y la aceleración son 400 ms y "swing".

Answer 9

Yo usaría el fragmento de código simple de CSS-Tricks.com:

$(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
        }, 1000);
        return false;
      }
    }
  });
});

Fuente : http://css-tricks.com/snippets/jquery/smooth-scrolling/

Answer 10

trabajos

$(''a[href*=#]'').each(function () {
    $(this).attr(''href'', $(this).attr(''href'').replace(''#'', ''#_''));
    $(this).on( "click", function() {

        var hashname = $(this).attr(''href'').replace(''#_'', '''');

        if($(this).attr(''href'') == "#_") {
            $(''html, body'').animate({ scrollTop: 0 }, 300);
        }
        else {
            var target = $(''a[name="'' + hashname + ''"], #'' + hashname),
                targetOffset = target.offset().top;
            if(targetOffset >= 1) {
                $(''html, body'').animate({ scrollTop: targetOffset-60 }, 300);
            }
        }
    });
});

Answer 11

jQuery.scrollTo hará todo lo que quieras y más!

Puedes pasarle todo tipo de cosas diferentes:

• Un número crudo
• Una cadena (''44 '','' 100px '','' + = 30px '', etc.)
• Un elemento DOM (lógicamente, secundario del elemento desplazable)
• Un selector, que será relativo al elemento desplazable
• La cadena ''max'' para desplazarse hasta el final.
• Una cadena que especifica un porcentaje para desplazarse a esa parte del contenedor (fe: 50% va a * al centro).
• Un hash {top: x, left: y}, xey puede ser cualquier tipo de número / cadena como el anterior.

Answer 12

Usé en mi sitio esto:

$(document).ready(function(){
$(''a[href^="#"]'').on(''click'',function (e) {
    e.preventDefault();

    var target = this.hash,
    $target = $(target);

    $(''html, body'').stop().animate({
        ''scrollTop'': $target.offset().top
    }, 1200, ''swing'', function () {
        window.location.hash = target;
    });
});

});

Podrías cambiar la velocidad del desplazamiento cambiando el "1200" que usé de forma predeterminada, funciona bastante bien en la mayoría de los navegadores.

después de colocar el código entre la etiqueta <head> </head> de su página, deberá crear el enlace interno en su etiqueta <body> :

<a href="#home">Go to Home</a>

¡Espero eso ayude!

Ps: No te olvides de llamar:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>