2022年03月24日   温氏效应   121 次浏览   暂无评论  

在做页面中经常需要通过锚点来控制页面内跳转,尤其是 返回顶部,如果采用传统的 #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

共有 0 条评论

发表评论