为啥当我滚动到顶部然后在我的 API 应用程序上返回但在网页上正常运行时，我的页面顶部按钮口吃/滞后/粘住？

Posted 2023-05-08

【中文标题】为啥当我滚动到顶部然后在我的 API 应用程序上返回但在网页上正常运行时，我的页面顶部按钮口吃/滞后/粘住？

【英文标题】：Why does my top of page button stutter/lag/stick when I scroll to top and then back down on my API app but acts normal on webpages?为什么当我滚动到顶部然后在我的 API 应用程序上返回但在网页上正常运行时，我的页面顶部按钮口吃/滞后/粘住？

【发布时间】：2021-10-04 09:41:06

【问题描述】：

所以我有一个 API，我添加了一个页面顶部按钮。该按钮在我构建的 2 个网页上的移动设备和桌面设备上运行良好，但对于我的 API 应用程序（尤其是这个），当我降低到移动设备屏幕尺寸时，它会滞后/卡住/卡住。看看我的屏幕截图，这里是代码：

      <!--Top of Page Button-->
    <div  class="top_link_position">
      <a  class="back-to-top" href="#page_top" title="Top">
      <button class="top_btn">
       <i class="fas fa-arrow-up fa-3x"></i>

       
      </button>
      </a>
  </div>

    .top_link_position 
  display: block;
position: fixed;
  bottom: 4%;
  right: 3%;
  z-index: 600;



.top_btn 
    border: 1.5px solid white;
    background: #db0606;
    padding: .5rem .5rem;
    color: white;
    font-weight: bolder;
    text-transform: uppercase;


$(document).ready(function () 
   $(window).scroll(function () 
      if ($(this).scrollTop() > 100) 
         $('.back-to-top').fadeIn();
       else 
         $('.back-to-top').fadeOut();
      
   );

   $('.back-to-top').click(function () 
      $("html, body").animate(
         scrollTop: 0
      , 100);
      return false;
   );

);

【参考方案1】：

我找到的唯一解决方案是从其他来源获取另一个按钮和代码。你在谷歌上找到的很多这些似乎都不起作用。