Home > Article > Web Front-end > Detailed code explanation jQuery implements anchor point downward smooth scrolling effect
This article mainly brings you an example of jQuery implementing the anchor point downward smooth scrolling effect. The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.
Achievement effect:
Implementation principle:
Use jQuery animate() Method to achieve smooth scrolling effect on the page
$('html, body').animate({ scrollTop: $(hash).offset().top }, 800, function(){ window.location.hash = hash; });
Simple example code:
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(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 }); }); </script> <style> body, html, .main { height: 100%; } section { min-height: 100%; } </style> </head> <body> <a href="#section2" rel="external nofollow" style=" font-size: 30px; font-weight: bold; text-align: center; ">点击此处平滑滚动到第二部分</a> <p class="main"> <section></section> </p> <p class="main" id="section2"> <section style=" background-color: #03c03c; color: #fff; font-size: 30px; text-align: center"> SECTION 2 </section> </p> </body> </html>
Related recommendations :
Picture scrolling special effect
angularjs realizes text up and down seamless scrolling special effect code
CSS3 +JQUERY page scrolling effect code_html/css_WEB-ITnose
The above is the detailed content of Detailed code explanation jQuery implements anchor point downward smooth scrolling effect. For more information, please follow other related articles on the PHP Chinese website!