Si tengo el siguiente código JS:
$(document).ready(function() { // Add smooth scrolling to all links $("a").on('click', function(event) { // Make sure this.hash has a value before overriding default behavior if (this.hash !== "") { // Prevent default anchor click behavior event.preventDefault(); // Store hash var hash = this.hash; // Using jQuery's animate() method to add smooth page scroll // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area $('html, body').animate({ scrollTop: $(hash).offset().top }, 800, function() { // Add hash (#) to URL when done scrolling (default click behavior) window.location.hash = hash; }); } // End if }); });Este es el HTML:
<a href="#about"> <div class="containerScroll"> <div class="first-scroll"></div> <div class="second-scroll"></div> </div> </a> En este momento, el efecto de desplazamiento funciona para todos los enlaces con la etiqueta a ; sin embargo, ¿puedo cambiar $("a").on('click', function(event) { a algo como $("scroll").on('click', function(event) { ? Ahora, yo' Espero que funcione para todas las etiquetas con scroll , así que ahora mi HTML se vería así:
<scroll href="#about"> <div class="containerScroll"> <div class="first-scroll"></div> <div class="second-scroll"></div> </div> </scroll> ¿Funcionaría esto? Esencialmente, quiero agregar otra etiqueta en lugar de a porque no quiero que el efecto de desplazamiento tenga lugar en todos los enlaces y solo en los que elija. ¿Es por eso que intenté cambiar la etiqueta para scroll pero aún no funcionó? ¿Se supone que debo definir una propiedad css de scroll para que funcione?
Usar jQuery para un desplazamiento suave no tiene sentido hoy en día
Hay dos métodos (#2 es mejor IMO)
const element = document.querySelector('#something') // element is the target you're trying to scroll to element.scrollIntoView({ behavior: "smooth" }) /* in CSS */ html { scroll-behavior: smooth; } //in JS element.scrollIntoView()