首页 > > 网页制作 > Javascript >

【前端】jQuery实现锚点向下平滑滚动特效

2018-06-24 00:04:16来源：未知阅读 ()

jQuery实现锚点向下平滑滚动特效

实现效果：

实现原理：

　　使用jQuery animate()方法实现页面平滑滚动特效

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

简单实例代码：

<!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" style="
      font-size: 30px;
      font-weight: bold;
      text-align: center;
">点击此处平滑滚动到第二部分</a>
<div class="main">
  <section></section>
</div>
<div class="main" id="section2">
  <section style="
      background-color: #03c03c;
      color: #fff;
      font-size: 30px;
      text-align: center">
      SECTION 2
  </section>
</div>
</body>
</html>

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有