Detailed code explanation jQuery implements anchor point downward smooth scrolling effect-JS Tutorial-php.cn

Detailed code explanation jQuery implements anchor point downward smooth scrolling effect

小云云

Release： 2017-12-29 13:12:11

Original

1181 people have browsed it

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

$(&#39;html, body&#39;).animate({
scrollTop: $(hash).offset().top
}, 800, function(){
window.location.hash = hash;
});

Copy after login

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(&#39;click&#39;, 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&#39;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
   $(&#39;html, body&#39;).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>

Copy after login

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!