Question

经常通过Google来这里，但我第一次提出问题。我对javascript不太熟悉，所以这里是html的一部分和我想要更改的javascript：

    <ul id="menu-toc" class="menu-toc">
    <li class="menu-toc-current"><a href="#item1">Item1</a></li>
    <li><a href="#item2">Item2</a></li>
    <li><a href="#item3">Item3</a></li>
    <li><a href="#item4">Item4</a></li>
</ul>

<div id="item3">
<article class="col">

    <figure>

<a href="#item5"><img src="link1.jpg"  /></a>

    </figure>

</article>

<article class="col">

    <figure>

        <a href="#item6"><img src="link2.jpg" />
</a>
    </figure>

</article>
</div>

<div id="item5">
// text
</div>

<div id="item6">
// text
</div>

var Page = (function() {

    var $container = $( '#container' ),
        $bookBlock = $( '#bb-bookblock' ),
        $items = $bookBlock.children(),
        itemsCount = $items.length,
        current = 0,
        bb = $( '#bb-bookblock' ).bookblock( {
            speed : 800,
            perspective : 2000,
            shadowSides : 0.8,
            shadowFlip  : 0.4,
            onEndFlip : function(old, page, isLimit) {

                current = page;
                // update TOC current
                updateTOC();
                // updateNavigation
                updateNavigation( isLimit );
                // initialize jScrollPane on the content div for the new item
                setJSP( 'init' );
                // destroy jScrollPane on the content div for the old item
                setJSP( 'destroy', old );

            }
        } ),
        $navNext = $( '#bb-nav-next' ),
        $navPrev = $( '#bb-nav-prev' ).hide(),
        $menuItems = $container.find( 'ul.menu-toc > li' ),
        $tblcontents = $( '#tblcontents' ),
        transEndEventNames = {
            'WebkitTransition': 'webkitTransitionEnd',
            'MozTransition': 'transitionend',
            'OTransition': 'oTransitionEnd',
            'msTransition': 'MSTransitionEnd',
            'transition': 'transitionend'
        },
        transEndEventName = transEndEventNames[Modernizr.prefixed('transition')],
        supportTransitions = Modernizr.csstransitions;

    function init() {

        // initialize jScrollPane on the content div of the first item
        setJSP( 'init' );
        initEvents();

    }

    function initEvents() {

        // add navigation events
        $navNext.on( 'click', function() {
            bb.next();
            return false;
        } );

        $navPrev.on( 'click', function() {
            bb.prev();
            return false;
        } );

        // add swipe events
        $items.on( {
            'swipeleft'     : function( event ) {
                if( $container.data( 'opened' ) ) {
                    return false;
                }
                bb.next();
                return false;
            },
            'swiperight'    : function( event ) {
                if( $container.data( 'opened' ) ) {
                    return false;
                }
                bb.prev();
                return false;
            }
        } );

        // show table of contents
        $tblcontents.on( 'click', toggleTOC );

        // click a menu item
        $menuItems.on( 'click', function() {

            var $el = $( this ),
                idx = $el.index(),
                jump = function() {
                    bb.jump( idx + 1 );
                };

            current !== idx ? closeTOC( jump ) : closeTOC();

            return false;

        } );                

        // reinit jScrollPane on window resize
        $( window ).on( 'debouncedresize', function() {
            // reinitialise jScrollPane on the content div
            setJSP( 'reinit' );
        } );

    }

    function setJSP( action, idx ) {

        var idx = idx === undefined ? current : idx,
            $content = $items.eq( idx ).children( 'div.content' ),
            apiJSP = $content.data( 'jsp' );

        if( action === 'init' && apiJSP === undefined ) {
            $content.jScrollPane({verticalGutter : 0, hideFocus : true });
        }
        else if( action === 'reinit' && apiJSP !== undefined ) {
            apiJSP.reinitialise();
        }
        else if( action === 'destroy' && apiJSP !== undefined ) {
            apiJSP.destroy();
        }

    }

    function updateTOC() {
        $menuItems.removeClass( 'menu-toc-current' ).eq( current ).addClass( 'menu-toc-current' );
    }

    function updateNavigation( isLastPage ) {

        if( current === 0 ) {
            $navNext.show();
            $navPrev.hide();
        }
        else if( isLastPage ) {
            $navNext.hide();
            $navPrev.show();
        }
        else {
            $navNext.show();
            $navPrev.show();
        }

    }

    function toggleTOC() {
        var opened = $container.data( 'opened' );
        opened ? closeTOC() : openTOC();
    }

    function openTOC() {
        $navNext.hide();
        $navPrev.hide();
        $container.addClass( 'slideRight' ).data( 'opened', true );
    }

    function closeTOC( callback ) {

        updateNavigation( current === itemsCount - 1 );
        $container.removeClass( 'slideRight' ).data( 'opened', false );
        if( callback ) {
            if( supportTransitions ) {
                $container.on( transEndEventName, function() {
                    $( this ).off( transEndEventName );
                    callback.call();
                } );
            }
            else {
                callback.call();
            }
        }

    }

    return { init : init };

})();

正如你所看到的，菜单是由javascript管理的，但是我想添加链接img，这些链接会转到不在菜单上的锚点。

非常感谢你的帮助。

P.S.:I' ;m french-canadian！

Answer 1

对于jquery动画，您只需使用此jquery代码，只需输入单击时触发的右选择器。

$(input selector here).on('click',function(){
  var myanchor = $(this).attr('id');
  $('body, html').animate({
    scrollTop: $("#"+myanchor).offset().top
  })
})

需要指向菜单以外的锚点的链接

1 个答案: