滚动上的 jQuery 不会使用锚散列滚动触发答案

【问题标题】：jQuery on scroll does not fired with anchor hash scroll滚动上的 jQuery 不会使用锚散列滚动触发
【发布时间】：2018-04-16 03:41:26
【问题描述】：

我正在尝试跟踪由于转到 URL 中的锚散列而发生的自动滚动所产生的滚动事件。例如http://example.com/page.html#theID 它应该滚动到id 的DOM 元素等于theID。

我需要跟踪此事件，以克服 Bootstrap 导航栏覆盖该元素，方法是增加其填充或滚动到比顶部更近的点，以确保它不会被覆盖。我试过以下代码：

...     
<script>
        $(document).ready(function(){
          $(this).on("scroll",function(){
             alert('Scroll Event...');
          })
        })
    <script>
    </body>
    </html>

如上所述，在 URL 中加载带有锚点的页面时，上述代码不起作用。但是，它仅在我手动滚动页面时才有效。

因此，有没有办法跟踪自动滚动到锚点？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

来自this answer我已经构建了检测自动滚动然后滚动到锚点上方的实现，以解决引导程序的导航栏覆盖锚区域。

<script type="text/javascript">
    autoScroll = true;
window.onscroll = function (e) {       
   if (autoScroll){ 
       axisY = e.pageY; //FireFox
       if (axisY == null){
           //It is not FireFox, 
       // it tested with Opera, Chrome, Ubuntu Web Browser, Android Browser.
           axisY = e.path[1].pageYOffset;
       }         
         $("html body").animate({scrollTop:axisY-70});
         autoScroll = false;
    }        
}

布尔值autoScroll是防止页面加载后停止普通滚动

【讨论】：