jQuery.animate(...) 无法正常工作

【问题标题】：jQuery.animate(...) is not working properlyjQuery.animate(...) 无法正常工作
【发布时间】：2026-01-20 14:35:01
【问题描述】：

我想创建一个简单的页面，下面有 snap（到元素）滚动页面：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8"/>

   <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.js"></script>
   <style type="text/css">
      .indexPnl{ margin-top:200px; max-height:500px; overflow-y:auto; scroll-snap-type: y mandatory; position:absolute;}
      .indexPnl, .indexPnl li{ list-style: none; }
      .indexPnl img{ width:100px; scroll-snap-align:start;}
      .body{ padding: 200px; }
      .body img{ width: 500px; }
      .page{ width:100%; height:100%; scroll-snap-align:start;}
      .bodyPnl { overflow-y: auto; position:fixed; top:0px; left:0px; height:100%; width:100%; scroll-snap-type: y mandatory; }
   </style>

   <script type="text/javascript"><!--
   $(document).ready(function(){
      $('.body').find('img').css('cursor', 'pointer').on('click', function(){
         var selector=$(this).attr('target');
         console.log('Going to page: '+selector);
         $('.bodyPnl').animate({'scrollTop': $(selector).position().top}, 800, function(){ console.log('DONE'); });
      });
   });
   //--></script>

</head>
<body>

   <div class="bodyPnl">
      <div class="page">
         <ul class="indexPnl">
            <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li>
            <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li>
            <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li>
            <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li>
            <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li>
            <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li>
            <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li>
            <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li>
            <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li>
            <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li>
         </ul>

         <div class="body">
            <img src="https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" target=".page:eq(1)"/>
         </div>
      </div>

      <div class="page" >
         <ul class="indexPnl">
            <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li>
            <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li>
            <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li>
            <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li>
            <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li>
            <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li>
            <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li>
            <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li>
            <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li>
            <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li>
         </ul>

         <div class="body">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQbYQSFdhlvD9_Inot8wimKt2hdMVXe1KLgog&usqp=CAU" target=".page:eq(2)"/>
         </div>
      </div>

      <div class="page" >
         <ul class="indexPnl">
            <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li>
            <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li>
            <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li>
            <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li>
            <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li>
            <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li>
            <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li>
            <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li>
            <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li>
            <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li>
         </ul>

         <div class="body">
            <img src="https://cdn4.vectorstock.com/i/1000x1000/55/13/abstract-golden-holiday-background-bokeh-effect-vector-5995513.jpg" target=".page:first"/>
         </div>
      </div>
   </div>

</body>
</html>

我的问题是：

  1. 平滑滚动动画不起作用（即使我删除了所有不必要的代码）；
  2. 第二次点击无法滚动到第三页（我试过offset()和position()，都不能正常工作；

PS：我已经尝试过，jQuery.scrollTo(..)，插件，但动画仍然无法正常工作。

下面的代码工作正常，但我可以找到不同之处..... 

<!DOCTYPE html>
<html lang="en">
<head>
   <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
   <style>
      #body{ width:800px; height:800px; overflow-y:auto; }
   </style>
</head>
<body>
<div id="body">

<div class="target" style="width:500px; height:500px; background-color:blue; opacity:1;">&nbsp;</div>
<button type="button" class="btn">Action</button>

<div style="height:1000px;">&nbsp;</div>

<div class="target2" style="width:500px; height:500px; background-color:blue; opacity:1;">&nbsp;</div>
</div>
</body>
<script type="text/javascript"><!--
$(document).ready(function(){
   $('.btn').on('click', function(){
      console.log('going to hide the target');
      $('#body').animate({'scrollTop': $('.target2').offset().top}, 800);
   });
});
//--></script>
<html>

【问题讨论】：

    标签： javascript html jquery animation jquery-animate


    【解决方案1】：

    最后，我解决了这个问题。 jQuery.animate(...) 正在正确更改 scrollTop 值，但“scroll-snap-type”和“scroll-snap-align”正在强制滚动捕捉！！！！！！

    解决办法：

     $(document).ready(function(){
    $('.body')
      .find('img')
      .css('cursor', 'pointer')
      .on('click', function(){
        var selector=$(this).attr('target');
        $('.bodyPnl')
          /********** IMPORTANT **********/
          .css('scroll-snap-type', 'none')
          /********** ********* **********/
          .animate({
            'scrollTop': '+='+$(selector).position().top}, 
            800 /*Duration*/, 
            function(){ 
              /********** IMPORTANT **********/
              $(this).css('scroll-snap-type', 'y mandatory'); 
              /********** ********* **********/
            }
          )
        ;
    });
 });

    【讨论】：

      猜你喜欢
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript C# Mysql Docker 算法 前端 SpringBoot Redis Vue spring .net 设计模式 .net core c++ kubernetes 数据库 机器学习 大数据 数据结构 微服务 js 人工智能 Go Android 面试 程序员 JVM 云原生 后端 ASP.net core 深度学习 CSS k8s git golang PHP devops Nginx Django React mybatis 架构 多线程 Spring Boot 云计算 LeetCode 分布式