javascript - how to catch scroll event caused by hash bang anchor link? - Stack Overflow

admin管理员组

文章数量:1405516

I am just wondering if there's a better way to approach this

So, say you have jump to link using anchor tag:

www.example/#about

opening that link will make browser natively auto-scroll to the section with

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

now, I want to catch this scroll event, so that I can add more offset on how much scroll the browser should use.

The reason for this is because I have a fixed navigation menu that consumes 120px of the browser.

Regards,

I am just wondering if there's a better way to approach this

So, say you have jump to link using anchor tag:

www.example./#about

opening that link will make browser natively auto-scroll to the section with

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

now, I want to catch this scroll event, so that I can add more offset on how much scroll the browser should use.

The reason for this is because I have a fixed navigation menu that consumes 120px of the browser.

Regards,

• javascript
• jquery
• html
• scroll
• anchor

Share Follow asked May 8, 2018 at 4:04 arvilarvil 92211 gold badge1414 silver badges3232 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

AFAIK there is no way to intercept this behaviour directly i.e. there is no user accessible event associated with it. Instead window.location.hash is made available to you. You can find the associated element and jump to it once the page has loaded.

e.g. something like:

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.querySelector(hash);
  // Do nothing if targetElement doesn't exist
  if (!targetElement) return;
  jumpToHash(targetElement, offset);
});
if (document.readyState === "plete") {
  jumpToHash(-120); // with 120px
} else {
  document.addEventListener("DOMContentLoaded", jumpToHash);
}

You can use jQuery scroll() Method. The scroll event occurs when the user scrolls in the specified element and it works for all scrollable elements and the window object (browser window). The scroll() method triggers the scroll event, or attaches a function to run when a scroll event occurs.

Trigger the scroll event for the selected elements:

$(selector).scroll()

Attach a function to the scroll event:

$(selector).scroll(function)

Example:

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./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>

You don't need JS for that, you can just add scroll-margin-top: 120px to that element in CSS.

本文标签： javascripthow to catch scroll event caused by hash bang anchor linkStack Overflow