单击导航链接将显示该部分的内容

Question

所以我想要实现的是当用户点击导航中的任何项目时，它将向下滚动（我正在使用此部分的wordpress插件）到该部分的页面。页面到达后，应显示内容。默认情况下，应隐藏内容，直到用户点击导航中的链接为止。

非常感谢任何帮助。

http://www.bootply.com/TFI6rj2yqQ

HTML

 <nav class="navbar navbar-default" role="navigation">
      <!-- Mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>

      <!-- Collect the nav links for toggling -->
      <div class="collapse navbar-collapse navbar-ex1-collapse"><ul id="main-menu" class="nav navbar-nav"><li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9"><a rel="m_PageScroll2id" href="#divorce">divorce</a></li>
    <li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10"><a rel="m_PageScroll2id" href="#seperationagreements">seperation agreements</a></li>
    <li id="menu-item-11" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11"><a rel="m_PageScroll2id" href="#familylaw">family law</a></li>
    <li id="menu-item-12" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-12"><a rel="m_PageScroll2id" href="#childcustody">child custody</a></li>
    <li id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13"><a rel="m_PageScroll2id" href="#more">&amp; more</a></li>
    </ul></div>  <p class="sectiontext"><i>(click on the title to be quickly directed to that section)</i></p>
    </nav>
    <div class="col-md-12 slug divorce">
            <div class="col-md-3 title"><h2 col-md-3="">About</h2></div>
                <div id="content" class="col-md-9 content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed fringilla magna, et vehicula augue. Curabitur auctor libero vel placerat laoreet. In vel iaculis dui, in sagittis purus. Maecenas ut tortor in lorem varius varius. Nam a orci a eros iaculis laoreet non vitae ante. Proin vestibulum elit id enim interdum lacinia. Cras ut porttitor leo. Nam vulputate porttitor varius.

    Aenean in elementum erat. Praesent porttitor metus vel gravida aliquet. Aenean convallis risus fringilla nisl condimentum sagittis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla vehicula risus ut orci imperdiet, ut condimentum urna pulvinar. Duis vitae pharetra ante. Praesent vitae felis non purus sollicitudin rhoncus eu eu felis. Ut est purus, fringilla nec gravida a, scelerisque ac tortor. Duis in facilisis purus. Curabitur sed felis vel sapien varius facilisis.</div>
                <p>&nbsp;</p>
    </div>
    <div class="col-md-12 slug divorce">
            <div class="col-md-3 title"><h2 col-md-3="">About</h2></div>
                <div id="content" class="col-md-9 content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed fringilla magna, et vehicula augue. Curabitur auctor libero vel placerat laoreet. In vel iaculis dui, in sagittis purus. Maecenas ut tortor in lorem varius varius. Nam a orci a eros iaculis laoreet non vitae ante. Proin vestibulum elit id enim interdum lacinia. Cras ut porttitor leo. Nam vulputate porttitor varius.

    Aenean in elementum erat. Praesent porttitor metus vel gravida aliquet. Aenean convallis risus fringilla nisl condimentum sagittis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla vehicula risus ut orci imperdiet, ut condimentum urna pulvinar. Duis vitae pharetra ante. Praesent vitae felis non purus sollicitudin rhoncus eu eu felis. Ut est purus, fringilla nec gravida a, scelerisque ac tortor. Duis in facilisis purus. Curabitur sed felis vel sapien varius facilisis.</div>
                <p>&nbsp;</p>
    </div>
    <div class="col-md-12 slug divorce">
            <div class="col-md-3 title"><h2 col-md-3="">About</h2></div>
                <div id="content" class="col-md-9 content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed fringilla magna, et vehicula augue. Curabitur auctor libero vel placerat laoreet. In vel iaculis dui, in sagittis purus. Maecenas ut tortor in lorem varius varius. Nam a orci a eros iaculis laoreet non vitae ante. Proin vestibulum elit id enim interdum lacinia. Cras ut porttitor leo. Nam vulputate porttitor varius.

    Aenean in elementum erat. Praesent porttitor metus vel gravida aliquet. Aenean convallis risus fringilla nisl condimentum sagittis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla vehicula risus ut orci imperdiet, ut condimentum urna pulvinar. Duis vitae pharetra ante. Praesent vitae felis non purus sollicitudin rhoncus eu eu felis. Ut est purus, fringilla nec gravida a, scelerisque ac tortor. Duis in facilisis purus. Curabitur sed felis vel sapien varius facilisis.</div>
                <p>&nbsp;</p>
    </div>
    <div class="col-md-12 slug divorce">
            <div class="col-md-3 title"><h2 col-md-3="">About</h2></div>
                <div id="content" class="col-md-9 content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed fringilla magna, et vehicula augue. Curabitur auctor libero vel placerat laoreet. In vel iaculis dui, in sagittis purus. Maecenas ut tortor in lorem varius varius. Nam a orci a eros iaculis laoreet non vitae ante. Proin vestibulum elit id enim interdum lacinia. Cras ut porttitor leo. Nam vulputate porttitor varius.

    Aenean in elementum erat. Praesent porttitor metus vel gravida aliquet. Aenean convallis risus fringilla nisl condimentum sagittis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla vehicula risus ut orci imperdiet, ut condimentum urna pulvinar. Duis vitae pharetra ante. Praesent vitae felis non purus sollicitudin rhoncus eu eu felis. Ut est purus, fringilla nec gravida a, scelerisque ac tortor. Duis in facilisis purus. Curabitur sed felis vel sapien varius facilisis.</div>
                <p>&nbsp;</p>
    </div>
    <div class="col-md-12 slug divorce">
            <div class="col-md-3 title"><h2 col-md-3="">About</h2></div>
      <div id="content" class="col-md-9 content"><div id="#divorce"></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed fringilla magna, et vehicula augue. Curabitur auctor libero vel placerat laoreet. In vel iaculis dui, in sagittis purus. Maecenas ut tortor in lorem varius varius. Nam a orci a eros iaculis laoreet non vitae ante. Proin vestibulum elit id enim interdum lacinia. Cras ut porttitor leo. Nam vulputate porttitor varius.

    Aenean in elementum erat. Praesent porttitor metus vel gravida aliquet. Aenean convallis risus fringilla nisl condimentum sagittis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla vehicula risus ut orci imperdiet, ut condimentum urna pulvinar. Duis vitae pharetra ante. Praesent vitae felis non purus sollicitudin rhoncus eu eu felis. Ut est purus, fringilla nec gravida a, scelerisque ac tortor. Duis in facilisis purus. Curabitur sed felis vel sapien varius facilisis.</div>
                <p>&nbsp;</p>
    </div>
    <div class="col-md-12 slug divorce">
            <div class="col-md-3 title"><h2 col-md-3="">About</h2></div>
                <div id="content" class="col-md-9 content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed fringilla magna, et vehicula augue. Curabitur auctor libero vel placerat laoreet. In vel iaculis dui, in sagittis purus. Maecenas ut tortor in lorem varius varius. Nam a orci a eros iaculis laoreet non vitae ante. Proin vestibulum elit id enim interdum lacinia. Cras ut porttitor leo. Nam vulputate porttitor varius.

    Aenean in elementum erat. Praesent porttitor metus vel gravida aliquet. Aenean convallis risus fringilla nisl condimentum sagittis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla vehicula risus ut orci imperdiet, ut condimentum urna pulvinar. Duis vitae pharetra ante. Praesent vitae felis non purus sollicitudin rhoncus eu eu felis. Ut est purus, fringilla nec gravida a, scelerisque ac tortor. Duis in facilisis purus. Curabitur sed felis vel sapien varius facilisis.</div>
                <p>&nbsp;</p>
    </div>

CSS

.hidden{
    visibility: hidden;
}

Javascript

    function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}


$(document).ready(function(){
     $('.content').each(function(){
        if(!isScrolledIntoView($(this))){
            $(this).addClass('hidden');
        }
    });

$(document).on('scroll', function(){
    $('.hidden').each(function(){
        if(isScrolledIntoView($(this))){
            $(this).removeClass('hidden').css({ 'display' : 'none' }).fadeIn();
        }
    });
});
});