メニュー以外のアンカーへのリンクが必要

Question

ここではGoogle経由でよく来ますが、初めて質問します。私はので、ここでは、Javascriptに精通していないよhtmlと私は変更したいのjavascriptの一部です：メニューは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 }; 

})(); 

が、私はリンクを追加したいと思います、img、それはメニューにないアンカーに行きます。

ありがとうございました。

P.S.:French-canadian！

Answer 1

jquery animateの場合、このjqueryコードを使用すると、クリックしたときにトリガされる右のセレクタを入力するだけで済みます。

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