En los sitios web, ¿cómo hace que se desplace suavemente a un elemento?

Utiliza JavaScript para suavizar el desplazamiento.

// Desplazarse a valores específicos
// scrollTo es lo mismo
window.scroll ({
arriba: 2500,
izquierda: 0,
comportamiento: ‘suave’
});

// Desplazarse ciertas cantidades desde la posición actual
window.scrollBy ({
arriba: 100, // podría ser un valor negativo
izquierda: 0,
comportamiento: ‘suave’
});

• ¿Cómo puedo construir una carrera en diseño web?
• Quiero obtener vínculos de retroceso de alta autoridad sin publicaciones innecesarias en foros, web 2.0, marcadores, directorios. ¿Cómo es eso posible?
• ¿Qué es mejor si recién estoy comenzando con JavaScript? 'JavaScript: the Good parts de Douglas Crockford o' Eloquent JavaScript 'de Marijn Haverbeke?
• ¿Cómo puedo acceder a un valor variable de una función desde otra función en JavaScript, en el mismo ámbito? ¿Puedes consultar el enlace del bolígrafo de código?
• ¿Qué debo considerar al escribir una API Node.js? ¿Debo comenzar con express, hapi u otro?

// Desplazarse a un determinado elemento
document.querySelector (‘. hola’). scrollIntoView ({
comportamiento: ‘suave’
});

(O) use jQuery para desplazarse suavemente a un ancla en la misma página.

// Seleccione todos los enlaces con hashes
$ (‘a [href * = “#”]’)
// Eliminar enlaces que en realidad no enlazan a nada
.not (‘[href = “#”]’)
.not (‘[href = “# 0”]’)
.click (función (evento) {
// Enlaces en la página
if (location.pathname.replace (/ ^ \ //, ”) == this.pathname.replace (/ ^ \ //, ”) && location.hostname == this.hostname) {
// Encuentra el elemento para desplazarte
objetivo var = $ (this.hash);
target = target.length? target: $ (‘[nombre =’ + this.hash.slice (1) + ‘]’);
// ¿Existe un objetivo de desplazamiento?
if (target.length) {
// Solo evita el valor predeterminado si la animación realmente va a suceder
event.preventDefault ();
$ (‘html, body’). animate ({scrollTop: target.offset (). top}, 1000, function () {
// Devolución de llamada después de la animación
// ¡Debe cambiar el enfoque!
var $ target = $ (target);
$ target.focus ();
if ($ target.is (“: focus”)) {
// Comprobando si el objetivo estaba enfocado
falso retorno;
} más {
$ target.attr (‘tabindex’, ‘- 1’);
// Agregando tabindex para elementos no enfocables
$ target.focus ();
// Establecer foco otra vez
};
});
}
}
});

Fuente: Desplazamiento suave | CSS-Tricks

Feliz codificación 🙂