Desplazamiento suave al hacer clic en un enlace ancla

Nuestros programadores estrellas agotaron sus provisiones de café, buscando a tiempo completo por la resolución, hasta que Amelia halló la contestación en GitHub y en este momento la comparte con nosotros.

Solución:

Actualización de abril de 2018: Ahora hay una forma nativa de hacer esto:

document.querySelectorAll('a[href^="#"]').forEach(anchor => 
    anchor.addEventListener('click', function (e) 
        e.preventDefault();

        document.querySelector(this.getAttribute('href')).scrollIntoView(
            behavior: 'smooth'
        );
    );
);

Actualmente, esto solo es compatible con los navegadores más avanzados.

---

Para compatibilidad con navegadores más antiguos, puede usar esta técnica jQuery:

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

    $('html, body').animate(
        scrollTop: $($.attr(this, 'href')).offset().top
    , 500);
);

Y aquí está el violín: http://jsfiddle.net/9SDLw/

---

Si su elemento de destino no tiene una ID y lo está vinculando por su nameutilizar esta:

$('a[href^="#"]').click(function () 
    $('html, body').animate(
        scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
    , 500);

    return false;
);

---

Para un mayor rendimiento, debe almacenar en caché eso $('html, body') selector, para que no se ejecute cada vez se hace clic en un ancla:

var $root = $('html, body');

$('a[href^="#"]').click(function () 
    $root.animate(
        scrollTop: $( $.attr(this, 'href') ).offset().top
    , 500);

    return false;
);

---

Si desea que se actualice la URL, hágalo dentro del animate llamar de vuelta:

var $root = $('html, body');

$('a[href^="#"]').click(function() 
    var href = $.attr(this, 'href');

    $root.animate(
        scrollTop: $(href).offset().top
    , 500, function () 
        window.location.hash = href;
    );

    return false;
);

La sintaxis correcta es:

//Smooth scrolling with links
$('a[href*=\#]').on('click', function(event)     
    event.preventDefault();
    $('html,body').animate(scrollTop:$(this.hash).offset().top, 500);
);

// Smooth scrolling when the document is loaded and ready
$(document).ready(function()
  $('html,body').animate(scrollTop:$(location.hash).offset().‌​top, 500);
);

simplificando: SECO

function smoothScrollingTo(target)
  $('html,body').animate(scrollTop:$(target).offset().​top, 500);

$('a[href*=\#]').on('click', function(event)     
    event.preventDefault();
    smoothScrollingTo(this.hash);
);
$(document).ready(function()
  smoothScrollingTo(location.hash);
);

Explicación de href*=\#:

• * significa que coincide con lo que contiene # carbonizarse. Por lo tanto solo coinciden anclas. Para obtener más información sobre el significado de esto, consulte aquí
• \ es porque el # es un carácter especial en el selector css, por lo que tenemos que escaparlo.

El nuevo picor en CSS3. Esto es mucho más fácil que todos los métodos enumerados en esta página y no requiere Javascript. Simplemente ingrese el código a continuación en su css y, de repente, los enlaces que apuntan a ubicaciones dentro de su propia página tendrán una animación de desplazamiento suave.

htmlscroll-behavior:smooth

Después de eso, cualquier enlace que apunte hacia un div se deslizará suavemente hacia esas secciones.

Section1

Editar: para aquellos confundidos acerca de lo anterior, una etiqueta. Básicamente es un enlace en el que se puede hacer clic. Luego puede tener otra etiqueta div en algún lugar de su página web como

content

En este sentido, se podrá hacer clic en el enlace e irá a cualquier #sección, en este caso es nuestro div al que llamamos sección.

Por cierto, pasé horas tratando de hacer que esto funcionara. Encontré la solución en una sección de comentarios oscuros. Tenía errores y no funcionaba en algunas etiquetas. No funcionó en el cuerpo. Finalmente funcionó cuando lo puse en html en el archivo CSS.

Comentarios y calificaciones

---

---

Utiliza Nuestro Buscador