El método scrollTop() en jQuery se usa para desplazarse a una parte particular de la página. Animar este método con las animaciones integradas disponibles puede hacer que el desplazamiento sea más fluido. Y, al restarle el valor especificado, el desplazamiento se detendrá desde la parte superior.
Enfoque: la parte hash del enlace ancla se extrae primero usando la propiedad hash y su posición en la página se encuentra usando el método offset() . Luego se llama al método scrollTop() en este valor hash para desplazarse a esa ubicación . Este método se anima encerrándolo dentro del método animate() y especificando la duración de la animación que se usará en milisegundos. Un valor mayor haría que la animación se completara más lentamente que un valor menor. Esto animará suavemente todos los enlaces de anclaje en la página cuando se haga clic en ellos. Y luego restaremos el valor especificado para detener el desplazamiento suave desde la parte superior.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to set smooth scrolling to stop at
a specific position from the top using
jQuery?
</title>
<!-- JQuery Script -->
<script src=
"https://code.jquery.com/jquery-3.4.1.min.js">
</script>
<!-- Style to make scrollbar appear -->
<style>
.scroll {
height: 1000px;
background-color: teal;
color: white;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
How to set smooth scrolling to stop at
a specific position from the top using
jQuery?
</b>
<p id="dest">
Click on the button below to
scroll to the top of the page.
</p>
<p class="scroll">
GeeksforGeeks is a computer science
portal. This is a large scrollable
area.
</p>
<a href="#dest">
Scroll to top
</a>
<!-- jQuery for smooth scrolling to a
specific position from top -->
<script>
// Define selector for selecting
// anchor links with the hash
let anchorSelector = 'a[href^="#"]';
$(anchorSelector).on('click', function (e) {
// Prevent scrolling if the
// hash value is blank
e.preventDefault();
// Get the destination to scroll to
// using the hash property
let destination = $(this.hash);
// Get the position of the destination
// using the coordinates returned by
// offset() method and subtracting 50px
// from it.
let scrollPosition
= destination.offset().top - 50;
// Specify animation duration
let animationDuration = 500;
// Animate the html/body with
// the scrollTop() method
$('html, body').animate({
scrollTop: scrollPosition
}, animationDuration);
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por aditya_taparia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA