Javascript FullPage.js链接导航<;李>;滑倒

Javascript FullPage.js链接导航<;李>;滑倒,javascript,jquery,fullpage.js,Javascript,Jquery,Fullpage.js,我正在为我的网站使用fullPage.js库,目前进展顺利,但我遇到了这个问题: 我正在尝试将导航按钮链接到幻灯片,因此当我单击“关于”时,它会滑到关于幻灯片,而不是滚动 因为我的网站是一个有5张幻灯片的单页部分,所以我想链接到幻灯片,而不是链接到各个部分。当我在读图书馆的纪录片时,它说要使用“数据锚”,但它不起作用 有什么想法吗? 多谢各位 注意:由于脚本是外部的,所以现场演示在JSFIDLE或CodePen上不起作用 <!DOCTYPE html> <html> &l

我正在为我的网站使用fullPage.js库,目前进展顺利,但我遇到了这个问题:

我正在尝试将导航按钮链接到幻灯片,因此当我单击“关于”时,它会滑到关于幻灯片,而不是滚动

因为我的网站是一个有5张幻灯片的单页部分,所以我想链接到幻灯片,而不是链接到各个部分。当我在读图书馆的纪录片时,它说要使用“数据锚”,但它不起作用

有什么想法吗? 多谢各位

注意:由于脚本是外部的,所以现场演示在JSFIDLE或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>

欢迎来到Shukri
身体{
宽度:100%;
身高:100%;
}
导航{
身高:100%;
背景色:白色;
}
a[标题]{
颜色:#b70000;
字体大小:20px;
}
a:链接,a:已访问{
颜色:#b70000;
文字装饰:无;
}
a:悬停,a:参观:悬停{
颜色:白色;
文字装饰:无;
背景色:#b70000!重要;
}
#菜单a:悬停{
颜色:白色;
}
.关于截面分区h2、.关于截面分区h5、.关于截面分区跨度{
颜色:红色;
}
.接触段跨度{
颜色:#b70000;
}
.联络a组{
颜色:黑色;
}
.联系a部分:悬停{
颜色:白色;
}

  • 东西 关于我们 介绍 伟大的建筑不是由思想、努力和技术的神秘炼金术创造出来的。这就是建筑的魅力所在。王国各地当前的教育、基础设施、交通和工业化活动为建筑师、工程师、规划师和企业家提供了巨大的建设机会,以适应有利于建筑设计、管理、能源问题和运营的所需范式

    MHS Architectural Office也有类似的愿景,不仅可以揭开技术建模的神秘面纱,还可以提供提示、培训和信息系统,帮助客户/公司、其他建筑师和工程师实现高效设计,并帮助能源建模、假设、协调过程,包括工具和输出对潜在设计决策的意义。因此,识别最佳实践和交付高质量工具以执行深入的性能分析的需求前所未有。可靠和一致的完整建筑系统、能源和运营分析对于在建筑设计和施工部门实现日益激进的性能目标是必要的

    MHS建筑办公室主要是一个基于科学的团队,而不是基于数据的团队。它由建筑、城市设计、工程、规划、It和信息管理领域经验丰富的专业人士组成

    MHS Architectural Office在建筑、MEP和结构方面大量采用最新的BIM工具,如Autodesk Revit。作为Autodesk“授权培训中心”和“授权认证中心”,并与业界同行建立联系,以简化设计过程,从而在效率、时间、金钱和精力方面取得更好的效果,以及将常规做法中普遍存在的常见事故可能性降至最低的协调

    作为建筑师,我们必须无畏地想象明天,因为明天将决定我们今天所做的事情的价值。那么,我们如何在我们的思维过程、建筑系统、材料选择中建立所需的灵活性,以适应未来的需要呢

    这里什么都没有宝贝。。。 穆罕默德舒克里
    总经理
    顾问建筑师
    20年的工作经验 穆罕默德·扎赫鲁丁·西迪奇
    顾问建筑师
    36年工作经验 尤尔根·施卢特工程师
    顾问土木工程
    30年的工作经验 瓦比·穆罕默德·马德
    土木工程师
    13年工作经验 阿卜杜勒·阿齐兹·拉舍迪工程师
    建筑工程师
    2年工作经验 阿纳斯·阿赫瓦尔工程师
    建筑工程师
    受训 哈立德·卡杜米先生
    协调市场营销和营销活动
    翻译
    36年工作经验 穆罕默德·哈达德先生
    会计
    4年工作经验 联系方式 电话:+966122345362

    传真:+966126949635

    电邮:

    网站: 版权和副本;穆罕默德·舒克里建筑事务所。版权所有

    $(文档).ready(函数(){ $(“#全页”)。全页({ //航行 菜单:“#菜单”, 是的, 主播:[“第一页”、“第二页”、“第三页”], 导航:错误, 导航位置:'右', 导航工具提示:[“第一张幻灯片”,“第二张”