首页
乌托邦
搞事情
资源分享
  2022年03月24日
使用jQuery animate()动画实现锚点缓慢平滑滚动

在做页面中经常需要通过锚点来控制页面内跳转，尤其是 返回顶部，如果采用传统的 #id的方式跳转，太过于生硬，一点也不丝滑。如果使用jQuery里的animate()动画效果，可给你带来完美的缓慢平滑滚动的效果。

jQuery 效果 – animate() 方法

animate() 方法执行 CSS 属性集的自定义动画。该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。只有数字值可创建动画（比如 “margin:30px”）。字符串值无法创建动画（比如 “background-color:red”）。

注释：使用 “+=” 或 “-=” 来创建相对动画（relative animations）。

语法

$(selector).animate(styles,speed,easing,callback)

平滑滚动实例：

返回顶部：

$('.scroll_top').click(function(){
  $('html,body').animate({scrollTop: '0px'}, 500);//创建动画，返回页面顶部，速度是800
});

跳转至指定位置：

$('.scroll_a').click(function(){
  $('html,body').animate({scrollTop:$('.a').offset().top}, "slow");//创建动画，跳转至class=a的位置，速度是slow
});

跳转至页面底部：

$('.scroll_bottom').click(function(){
  $('html,body').animate({scrollTop:$('.bottom').offset().top}, 1500);//创建动画，跳转至页面底部，速度是1500
});

完整实例源码参考：

<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>使用jQuery animate()动画实现锚点缓慢平滑滚动</title>
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    </head>
    
    <body>
        <style>
            body { text-align: center; font-size: 3rem; }
              header { padding: 50px 0; background-color: #CEE8FF; }
              footer { padding: 50px 0; background-color: #B4C4D3; }
              .box { padding: 100px 0; background:#C1D8ED; margin:10px 0;} 
              .scroll_box { position:fixed; right:0; top: 30%; font-size: 1.2rem; cursor:pointer; color:#EAEAEA;}
              .scroll_box p { width: 50px; margin: 10px 0; padding: 10px; background-color: #303841; }
        </style>
        </head>
        
        <body>
            <header>网站顶部</header>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box a">产品介绍</div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <footer class="bottom">网站底部</footer>
            <div class="scroll_box">
                <p class="scroll_top">返回顶部</p>
                <p class="scroll_a">产品介绍</p>
                <p class="scroll_bottom">滑到底部</p>
            </div>
            <script type="text/javascript">
                $(document).ready(function($){ 
                  $('.scroll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); 
                  $('.scroll_a').click(function(){$('html,body').animate({scrollTop:$('.a').offset().top}, 800);}); 
                  $('.scroll_bottom').click(function(){$('html,body').animate({scrollTop:$('.bottom').offset().top}, 800);}); 
                });
            </script>
        </body>

</html>

更多 animate()动画效果说明，可移步菜鸟教程学习：https://www.runoob.com/jquery/jquery-animate.html

标签：, , ,

上一篇：


下一篇：