如何捕获由 hash bang anchor link 引起的滚动事件？

Question

我只是想知道是否有更好的方法来解决这个问题

所以，假设您 jump to link 使用锚标记：

www.example.com/#about

打开 link 将使浏览器自动滚动到带有

的部分

<div id="about"></div>

现在，我想捕捉这个 scroll 事件，这样我就可以添加更多关于浏览器应该使用多少滚动的 offset。

这是因为我有一个 fixed 导航菜单，它占用了浏览器的 120px。

此致，

Answer 1

据我所知，无法直接拦截此行为，即没有与之关联的用户可访问事件。相反 window.location.hash 可供您使用。您可以找到关联的元素并在页面加载后跳转到它。

例如类似于：

function jumpToElement(element, offset) {
  if (!offset) offset = 0;
  var verticalPos = element.offsetHeight;
  window.scrollTo(0, verticalPos + offset);
}
function jumpToHash(offset) {
  var hash = window.location.hash;
  // Do nothing if no hash exists
  if (typeof hash !== 'string' || !hash.length) return;
  var targetElement = document.getElementById(hash);
  // Do nothing if targetElement doesn't exist
  if (!targetElement) return;
  jumpToHash(targetElement, offset);
});
if (document.readyState === "complete") {
  jumpToHash(-120); // with 120px
} else {
  document.addEventListener("DOMContentLoaded", jumpToHash);
}

Answer 2

可以使用jQueryscroll()方法。当用户在指定元素中滚动时发生滚动事件，它适用于所有可滚动元素和 window 对象（浏览器 window）。 scroll()方法触发scroll事件，或者在scroll事件发生时给运行附加一个函数

触发选中元素的滚动事件：

$(selector).scroll()

将函数附加到滚动事件：

$(selector).scroll(function)

示例：

var $titlebar = $( '.titlebar' ),
    fixedPosition = function() {
      var pos1 = $titlebar.offset().top,
          winTop = $( window ).scrollTop();
          $( window ).scrollTop( winTop + 1 );
          var pos2 = $titlebar.offset().top;
          $( window ).scrollTop( winTop );
          return ( pos1 != pos2 )
    }(),
    titlebarHeight = fixedPosition ? $titlebar.outerHeight() : 0,
    $menu = $( '.nav a' );
        
$( '.nav a' ).click( function( e ) {
  var $target = $( this.hash );

  e.preventDefault();

  if ( !$( this ).hasClass( 'active' ) ) {
            $( 'html, body' ).stop( true, false ).animate( {
                'scrollTop': $target.offset().top - titlebarHeight
            }, 800 );
        }
    } );

$( window ).on( 'scroll', function() {
  didScroll = true
} );

setInterval( function() {
  if ( didScroll ) {
    didScroll = false;

    var scrollPos = $( document ).scrollTop(),
        windowHeight = ( $( window ).height() - titlebarHeight ) / 2;

        if ( fixedPosition ) {
          $menu.each( function( index ) {
            var $page = $( this.hash );

            if ( $page.position().top <= scrollPos + titlebarHeight + windowHeight ) {
              $( '.nav a.active' ).removeClass( 'active' );
              $menu.eq( index ).addClass( 'active' )
            }
          });
        }
  }
}, 150 );

html,
body,
.contents,
.contents div {
  padding: 0;
  margin: 0;
  height: 100%
}
.titlebar {
  width: 100%;
  position: fixed;
  background-color: black
}
ul {
  padding: 0;
  margin: 0;
  list-style: none
}
.nav li {
  display: inline
}
.nav a {
  display: inline-block;
  padding: 1em;
  color: white;
  text-decoration: none;
  -webkit-transition-duration: .2s;
     -moz-transition-duration: .2s;
       -o-transition-duration: .2s;
          transition-duration: .2s
}
.nav a:hover {
  background-color: #555;
}
.nav a.active,
.nav a.active:hover{
    color: #69452d;
    background-color: #e1ba89;
    cursor: default
}
#home {
  padding: 4em 1em 1em;
  background-color: #b6946b
}
#features {
  padding: 1em;
  background-color: #e1ba89
}
#buy {
  padding: 1em;
  background-color: #ddd
}
#contact {
  padding: 1em;
  background-color: white
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="titlebar">
  <ul class="nav">
    <li><a href="#home" class="active">Home</a></li
    ><li><a href="#features">Features</a></li
    ><li><a href="#buy">Buy</a></li
    ><li><a href="#contact">Contact</a></li>
  </ul>
</div>
<div class="contents">
  <div id="home">Home</div>
  <div id="features">Features</div>
  <div id="buy">Buy</div>
  <div id="contact">Contact Us</div>
</div>

Answer 3

您不需要 JS，您只需将 scroll-margin-top: 120px 添加到 CSS 中的该元素即可。

如何捕获由 hash bang anchor link 引起的滚动事件？

how to catch scroll event caused by hash bang anchor link?

html

javascript

anchor

jquery

scroll