由于javascript,锚标签无法正常工作

时间:2017-07-05 20:24:29

标签: javascript html anchor

我正在使用javascript进行全页滚动。我在stackoverflow上找到它,但是我的锚导航无效。 我们假设我有4个不同的部分:
1-HOME
2-关于
3-WORK
4-CONTACT

当我在HOME部分,并单击菜单中的CONTACT锚标签时,它不允许我跳过部分,但它只是一个接一个地到达它。 如何禁用此选项?

var debug = false;

// setup default index of 0
var index = 0;

// setup scrolling flag
var scrolling = false;

// cache a few elements for reference
var win = $( window );
var body = $( 'body' );
var container = $( '.container' );

// setup a few more variables for future use
var lastTop = 0;
var current, offset;

// bind scroll event
win.on( 'scroll', function( ev ) {
// prevent the default event
ev.preventDefault();
// check to make sure we don't fire the scroll multiple times
if ( debug ) console.log( scrolling, 'scrolling' );
if ( scrolling ) return;

// set the scrolling flag to true
scrolling = true;

// run the update function
updateActive();

// clear the scrolling flag to allow the user to access the next element
setTimeout( function() { scrolling = false; }, 500 );

// update a few variables for the next interaction
current = container.find( '.inner[data-index='+index+']' );
offset = current.offset();
lastTop = offset.top;

// handle the animation
body.animate(
    { scrollTop : offset.top + 'px' }
);

});

function updateActive() {
// get the current top offset
var top = win.scrollTop();
// determine which direction we are scrolling
if ( top > lastTop ) { 
    // down
    if ( debug ) console.log( 'scrolling down' );
    // let make sure we aren't on the last element
    if ( debug ) console.log( index, $( '.inner' ).length );
    if ( index == $( '.inner' ).length  ) {
        if ( debug ) console.log( 'on last element, nothing to do' );
        return;
    }

    // update index & top
    if ( debug ) console.log( index, 'index before' );
    index++;
    if ( debug ) console.log( index, 'index after' );
    lastTop = top;

} else { 
    // up
    if ( debug ) console.log( 'scrolling up' );
    // let make sure we aren't on the first element
    if ( ! index ) {
        if ( debug ) console.log( 'on first element, nothing to do' );
        return;
    }

    // update index & top
    if ( debug ) console.log( index, 'index before' );
    index--;
    if ( debug ) console.log( index, 'index after' );
    lastTop = top;

}
}

0 个答案:

没有答案