FullPage.js link nav <li> 滑动

Question

我正在为我的网站使用 fullPage.js 库，到目前为止一切顺利，但我遇到了这个问题：

我正在尝试 link 导航按钮到幻灯片，所以当我点击 "About" 它会滑到关于幻灯片，而不是滚动！！

因为我的网站是一个包含 5 张幻灯片的页面部分，所以我想 link 到幻灯片，而不是 link 到部分。当我阅读图书馆的纪录片时，它说要为此使用 "data-anchor" 但它没有用。

有什么想法吗？谢谢。

注意：现场演示不适用于 JSFiddle 或 CodePen，因为脚本是外部的。

<!DOCTYPE html>
<html>
<head>
    <title>Welcome to Shukri</title>
<!--- Bootstrap.css --->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
<!--- Bootstrap Theme --->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous" />
<!--- style.css --->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--- Responsive.css --->
<link rel="stylesheet" type="text/css" href="css/responsive.css" />
    <!--- Other --->
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css"/>
<link rel="stylesheet" type="text/css" href="highslide/highslide-ie6.css"/>
</head>
<!------------------------------------------------------------------->

<body>


<style>
    body {
        width: 100%;
        height: 100%;
    }

    nav {
        height: 100%;
        background-color: white;
    }

    a[title] {
        color: #b70000;
        font-size: 20px;
    }

    a:link, a:visited {
            color: #b70000;
            text-decoration: none;
        }

    a:hover, a:visited:hover {
            color: white;
            text-decoration: none;
            background-color: #b70000 !important;
        }

    #menu li a:Hover {
        color: white;
    }

    .about-section div h2, .about-section div h5, .about-section div span {
        color: red;
    }

    .contact-section span {
        color: #b70000;
    }

    .contact-section a {
        color: black;
    }

    .contact-section a:Hover {
        color: white;
    }

</style>

<aside class="container-fluid" id="menu">
    <nav class="navbar-nav navbar navbar-fixed-top col-lg-2">
        <div class="navbar"><img style="padding-top: 20px;" src="imgs/logo.png" alt="Logo"/></div>
        <ul class="nav menu nav-pills nav-stacked">
                <li class="nav-item slide1"><a href="#slide1" title="HomePage">Home</a></li><br>
                <li class="nav-item slide2"><a href="#slide2" title="About Shukri">About Us</a></li>
                <li class="nav-item slide3"><a href="#slide3" title="Projects">Our Projects</a></li>
                <li class="nav-item slide4"><a href="#slide4" title="Employees">Our Employees</a></li>
                <li class="nav-item slide5"><a href="#slide5" title="Contqct Information">Contact Us</a></li>
            </ul>
    </nav>
</aside>




<div id="fullpage">
    <div class="section">
    <div class="slide" data-anchor="slide1">
        <div class="container">
    <section class="home-section">
        <div>
            STUFF
        </div>
    </section>
</div>
    </div>


    <div class="slide" data-anchor="slide2">
<div class="container">
    <section class="about-section">
        <div>
            <h2>About US</h2>
            <h5>INTRODUCTION</h5>

            <p><span>Great architecture</span> is not made but evolves from a mysterious alchemy of mind, efforts and technology. That’s what makes architecture alluring. The current education, infrastructures, transportation and industrialization activities around the kingdom has given architects, engineers, planners and entrepreneurs tremendous opportunities to build to suit the required paradigm favorable for building design, its management, its energy issues and operations.</p>

            <p><span>MHS Architectural Office</span> has similar vision, not only demystify technology modeling in general but also to provide tips, training and information system that will help clients/companies, other architects and engineers to achieve efficient design and aid in energy modeling, the assumptions, coordination process, including the tools and what the output means to potential design decisions. Therefore the need to identify best practices and deliver quality tools to perform in-depth performance analysis has never been greater. Reliable and consistent full-building system, energy and operational analysis are necessary to achieve increasingly aggressive performance targets in the building design and construction sectors.</p>

            <p><span>MHS Architectural Office</span> is primarily a science based team, as opposed to data-based team. It is comprised of experienced professionals in the fields of architecture, urban design, engineering, planning, IT and Information management.</p>

            <p><span>MHS Architectural Office</span> profusely adopts the latest BIM tools like the Autodesk Revit in Architecture, MEP and Structure. Being an Autodesk “Authorized Training Center” and “Authorized Accrediting Center” and networking with industry peers to simplify the design process to achieve better results in terms of efficiency, economy of time, money, efforts, and coordination which minimize the likelihood of common mishaps which otherwise is so prevalent in the conventional practices.</p>

            <p><span>As architects</span>, we have to be fearless to visualize the tomorrow, because it will be the tomorrow that decides the worthiness of what we do today. So how do we build the kind of flexibility needed into our thought process, building system, material selection, so that it bends to the future’s need?</p>
        </div>
    </section>
</div>
    </div>


    <div class="slide" data-anchor="slide3">
        <div class="container">
    <section class="projects-section">
        <div>
            Nothing Here Baby...
        </div>
    </section>
</div> 
    </div>


    <div class="slide" data-anchor="slide4">
        <div class="container">
        <section class="employee-section">
          <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <div class="table-responsive">
    <div class="tg-wrap"><table class="tg table">
    <tr>
    <th class="tg-yw4l"><img src="imgs/Mohammed_H_Shoukri.png"/></th>
    <td><span>Eng. Mohammed H. Shoukri</span>
    <br>
    General Manger<br>
    Consultant Architect<br>
    20 Years experience
    </td>

    <th class="tg-yw4l"><img src="imgs/Mohammed_Zahiruddin_Siddiqi.png"/></th>
    <td><span>Eng. Mohammed Zahiruddin Siddiqi</span>
    <br>
    Consultant Architect<br>
    36 Years experience
    </td>
    </tr>

    <th class="tg-yw4l"><img src="imgs/Jurgen_Schluter.png"/></th>
    <td><span>Eng. Jurgen Schluter</span>
    <br>
    Consultant Civil<br>
    30 Years experience
    </td>

        <th class="tg-yw4l"><img src="imgs/Wahbi_Mohammed_Maad.png"/></th>
    <td><span>Eng. Wahbi Mohammed Maad</span>
    <br>
    Civil Engineer<br>
    13 Years experience
    </td>

    <tr>
    <th class="tg-yw4l"><img src="imgs/PHTO.png"/></th>
    <td><span>Eng. Abdulaziz S. Rasheedi</span>
    <br>
    Architect Engineer<br>
    2 Years experience
    </td>

    <th class="tg-yw4l"><img src="imgs/anas.jpg"/></th>
    <td><span>Eng. Anas Al Ahwal</span>
    <br>
    Architect Engineer<br>
    under training
    </td>
    </tr>

    <tr>
    <th class="tg-yw4l"><img src="imgs/Khalid_R_Kaddoumi.png"/></th>
    <td><span>Mr. Khalid R. Kaddoumi</span>
    <br>
    Co-ordinating marketing and<br>
    translation<br>
    36 Years experience
    </td>

    <th class="tg-yw4l"><img src="imgs/Mohammed_M_Al%20Haddad.png"/></th>
    <td><span>Mr.Mohammed M. Al Haddad</span>
    <br>
    Accountant<br>
    4 Years experience
    </td>
    </table></div>
       </div>
        </div>
        </div>
    </div>

    <div class="slide" data-anchor="slide5">
        <div class="container">
<section class="contact-section">
        <h2>Contact Info</h2>
<td width="746" valign="top" class="main_ubg"><table width="746" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td align="center" valign="top" class="main_bg"><table width="736" height="212" border="0">
          <tr>
            <td align="center" valign="top"><table width="650" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td width="300" valign="top"><img src="images/kroky.jpg" width="300" height="243" hspace="10"></td>
                <td width="400" valign="top" class="content"><span>Tel :</span>+966122345362<br><br>
                  <span>Fax :</span>+966126949635<br><br>
                  <span>Email :</span> <a href="mailto:info@mhs-arch.com">info@mhs-arch.com</a>
                    <br><br>
<span>Website :</span> <a href="http://www.mhs-arch.com" target="_self">http://www.mhs-arch.com</a></td>
              </tr>
            </table></td>
          </tr>
          <tr>
            <td align="center" valign="top">&nbsp;</td>
          </tr>
        </table></td>
      </tr>
    </table></td>
</section>
</div>
    </div>
    </div>
</div>


<footer class="footer" id="footer">
    <p class="text-center navbar-fixed-bottom" style="bottom: 20px; color: #b70000; font-size: 12px;">Copyright &copy; Mohammed H Shukri Architectural Office. All rights reserved</p>
</footer>


<!--- JQuery --->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!--- Bootstrap JS --->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!--- Custom JS --->
<script src="js/jquery.fullPage.min.js"></script>
    <script src="js/examples.js"></script>
<script>
    $(document).ready(function() {
    $('#fullpage').fullpage({
                //Navigation
        menu: '#menu',
        lockAnchors: true,
        anchors:['firstPage', 'secondPage', 'thirdPage'],
        navigation: false,
        navigationPosition: 'right',
        navigationTooltips: ['firstSlide', 'secondSlide'],
        showActiveTooltip: false,
        slidesNavigation: false,
        slidesNavPosition: 'bottom',

        //Scrolling
        css3: true,
        scrollingSpeed: 700,
        autoScrolling: false,
        fitToSection: false,
        fitToSectionDelay: 1000,
        scrollBar: false,
        easing: 'easeInOutCubic',
        easingcss3: 'ease',
        loopBottom: false,
        loopTop: false,
        loopHorizontal: true,
        continuousVertical: false,
        continuousHorizontal: true,
        scrollHorizontally: true,
        interlockedSlides: false,
        dragAndMove: true,
        offsetSections: false,
        resetSliders: false,
        fadingEffect: false,
        normalScrollElements: '#element1, .element2',
        scrollOverflow: true,
        scrollOverflowReset: false,
        scrollOverflowOptions: null,
        touchSensitivity: 15,
        normalScrollElementTouchThreshold: 5,
        bigSectionsDestination: null,

        //Accessibility
        keyboardScrolling: true,

        //Design
        controlArrows: true,
        verticalCentered: true,
        paddingTop: '3em',
        paddingBottom: '10px',
        fixedElements: '#header, .footer',
        responsiveWidth: 0,
        responsiveHeight: 0,
        responsiveSlides: true,

        //events
        onLeave: function(index, nextIndex, direction){},
        afterLoad: function(anchorLink, index){},
        afterRender: function(){},
        afterResize: function(){},
        afterResponsive: function(isResponsive){},
        afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
        onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}
    });
});
</script>
<script src="highslide/highslide-full.min.js"></script>
<script type="text/javascript">
    // override Highslide settings here
    // instead of editing the highslide.js file
    hs.graphicsDir = '/highslide/graphics/';
</script>
</body>
</html>

Answer 1

利用fullPage.js的moveTo功能，将其添加到您自己的自定义点击事件中。

这样您就可以转到所需的部分和幻灯片。

Live demo

FullPage.js link nav <li> 滑动

FullPage.js link nav <li> to slide

javascript

jquery

fullpage.js