There are a few ways to adjust the speed of the scroll animation when a click event is triggered in JQuery:
$('html, body').animate({
scrollTop: $("#target-element").offset().top
}, 1000); // Scroll animation duration set to 1 second
$('html, body').animate({
scrollTop: $("#target-element").offset().top
}, {
duration: 1000, // Scroll animation duration set to 1 second
easing: 'easeInOutCubic' // Easing type set to cubic
});
/* Set scroll animation speed to 1 second */
html, body {
scroll-behavior: smooth;
scroll-behavior-duration: 1s;
}
To prevent delays when the click event is triggered and the scroll animation starts, you can use event.preventDefault() to prevent the default behavior of the link or button element. For example:
$('a[href^="#"]').on('click', function(event) {
event.preventDefault(); // Prevent default behavior
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 1000); // Scroll animation duration set to 1 second
});
This code will prevent the link from jumping to the target element and instead smoothly scroll to it with the animation duration set to 1 second.
Asked: 2023-06-29 02:12:27 +0000
Seen: 9 times
Last updated: Jun 29 '23