需要鏈接到除菜單之外的其他錨點

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 
    }) 
})