Home >Web Front-end >JS Tutorial >How Can I Implement Smooth Scrolling for Anchor Links in My Website?
Smooth scrolling can significantly improve the user experience when navigating through your web page using anchor links. By eliminating jarring jumps and providing a seamless transition, you enhance the page's accessibility and overall aesthetics.
Recent versions of major browsers now support native smooth scrolling for anchor links. You can implement this functionality using the following code:
document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', e => { e.preventDefault(); document.querySelector(anchor.getAttribute('href')).scrollIntoView({ behavior: 'smooth' }); }); });
For older browser compatibility, jQuery offers a reliable solution:
$(document).on('click', 'a[href^="#"]', event => { event.preventDefault(); $('html, body').animate({ scrollTop: $($.attr(this, 'href')).offset().top }, 500); });
If the target element lacks an ID but is linked to by name, use the following code:
$('a[href^="#"]').click(function () { $('html, body').animate({ scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top }, 500); return false; });
For efficiency, it's recommended to cache the $('html, body') selector:
var $root = $('html, body'); $('a[href^="#"]').click(function () { $root.animate({ scrollTop: $( $.attr(this, 'href') ).offset().top }, 500); return false; });
To update the URL during the scrolling animation, include the following code within the callback:
var $root = $('html, body'); $('a[href^="#"]').click(function() { var href = $.attr(this, 'href'); $root.animate({ scrollTop: $(href).offset().top }, 500, () => { window.location.hash = href; }); return false; });
By incorporating these techniques, you can provide a seamless and engaging navigation experience for your website users, making it a joy to navigate through the page's content.
The above is the detailed content of How Can I Implement Smooth Scrolling for Anchor Links in My Website?. For more information, please follow other related articles on the PHP Chinese website!