Home > Article > Web Front-end > Detailed code explanation jQuery implements anchor point downward smooth scrolling effect

Detailed code explanation jQuery implements anchor point downward smooth scrolling effect

小云云Original: 2017-12-29 13:12:111245browse

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;
});

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Master jQuery to implement mouse drawing frame and select the data in the frameNext article：Master jQuery to implement mouse drawing frame and select the data in the frame

See more

Detailed code explanation jQuery implements anchor point downward smooth scrolling effect

Related articles