如何进行导航" scrollTo"到部分?

时间:2016-11-06 14:51:51

标签: html

我目前正在努力弄清楚导航标签的原因,不要滚动到一个网页的指定部分。最初我认为这个问题可能是由于语法错误造成的,但从我的角度来看,这似乎很好。下面我从index.html中包含了最小的代码副本。我真的很感激,如果有人能让我知道这个问题是什么&解决方案可能是。提前致谢。



<!-- Navigation -->
<header class="header scrolling-header">
  <nav id="nav" class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container clearfix">
      <a class="toggle-button visible-xs-block" data-toggle="collapse" data-target="#navbar-collapse">
        <i class="fa fa-navicon"></i>
      </a>
      <a class="navbar-brand scroll" href="index.html">
        <img class="normal-logo " src="img/logo.png" alt="logo" />
        <img class="scroll-logo hidden-xs" src="img/logo-dark.png" alt="logo" />
      </a>
      <div class="right-nav-block pull-right clearfix">
        <div class="navbar-collapse collapse floated" id="navbar-collapse">
          <ul class="main-menu nav navbar-nav clearfix navbar-with-inside vcenter">

            <li class=""><a href="#services-section" class="scrollTo">Services</a>
            </li>
            <li class=""><a href="#works-section" class="scrollTo">Work</a>
            </li>
            <li class=""><a href="#about-section" class="scrollTo">About</a>
            </li>
            <li class=""><a href="#about-section" class="scrollTo">Quote</a>
            </li>

            <li class="">
              <a href="#">Contact</a>
              <div class="wrap-inside-nav">
                <div class="inside-col">
                  <ul class="inside-nav">
                    <li><a href="contact.html">Contact 1</a>
                    </li>
                    <li><a href="contact-2.html">Contact 2</a>
                    </li>
                    <li><a href="contact-3.html">Contact 3</a>
                    </li>
                  </ul>
                </div>
              </div>
            </li>
            <li class=""><a href="#"><i class="fa fa-twitter"></i></a>
            </li>

            <li class=""><a href="#"><i class="fa fa-facebook"></i></a>
            </li>
          </ul>
          <ul class="nav navbar-nav hidden-xs clearfix vcenter">
            <li>
              <a href="#" class="toggle-menu-button">
                <div class="toggle-menu-button-icon">

                </div>
              </a>
            </li>
            <li class="no-hover"><a href="#">call us 1.800.12345</a>
            </li>
          </ul>
        </div>

      </div>
    </div>
  </nav>
  <div class="wrap-fixed-menu" id="fixedMenu">
    <div class="top-items">
      <a href="blog.html" class="top-menu-item menu-item">
        <span class="subtitle">All The Latest</span>
        <span class="title">Blog</span>
      </a>
      <a href="portfolio.html" class="top-menu-item menu-item">
        <span class="subtitle">Awesome</span>
        <span class="title">Portfolio</span>
      </a>
    </div>
    <div class="bottom-items">
      <a href="contact.html" class="bottom-menu-item menu-item">
        <span class="subtitle">We Are Designers</span>
        <span class="title">Contacts</span>
      </a>
      <div class="bottom-menu-item menu-item contact-info">
        <div class="row">
          <div class="col-md-12">
            <i class="fa fa-home"></i>
            <label>ADDRESS</label>
            <p class="vcenter">746 Roberts Road Findlay, OH 45840</p>
          </div>
          <div class="col-md-12">
            <i class="fa fa-phone"></i>
            <label>PHONE</label>
            <p class="vcenter">+201 126 216 88</p>
          </div>
          <div class="col-md-12">
            <i class="fa fa-envelope"></i>
            <label>EMAIL</label>
            <p class="vcenter">support@CreativeBrick.com</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>
<!--./navigation -->


<!-- Slider header -->

<section class="section-header-slider">

</section>


<!-- Section intro -->

<section class="section-intro blue-dark ">
  <div class="container dark-content">
    <div class="row">
      <div class="col-md-3 hidden-sm hidden-xs">

      </div>
      <div class="col-md-3 scrollme animateme" data-when="enter" data-from="0.5" data-to="0" data-crop="false" data-scale="1.5" data-opacity="0">
        <div class="arrow hidden-sm hidden-xs">
          <img src="img/arrow.png" alt="" />
        </div>
        <div class="intro-title">Intro</div>
      </div>
      <div class="col-md-5 col-sm-12">
        <div class="intro-text">

        </div>
        <div class="under-intro-text">

        </div>
      </div>
    </div>
  </div>
</section>


<!-- Section intro 2 -->

<section class="section-intro-2 ">
  <div class="container">
    <div class="row">

    </div>
  </div>
</section>












<!-- ========================== -->
<!-- Section Services -->
<!-- ========================== -->
<section class="section-services">
  <div class="container">
    <div class="section-heading">
      <div class="section-subtitle">creating awesomeness</div>
      <div class="section-title">services we provide</div>
      <div class="sep-element"></div>
    </div>
  </div>
  <div class="wrap-services-tabs">
    <div class="wrap-tabs">
    </div>
    <div class="wrap-tabs-content top-arrow-effect">

      <div class="container">
        <!-- Tab panes -->
        <div class="tab-content">
          <div class="tab-pane" id="support">
            <div class="row">
              <div class="col-md-10 col-md-offset-1 col-sm-12">
                <div class="row">
                  <div class="col-md-12">
                    <h5 class="bold text-uppercase blue">Analytics details</h5>
                    <p>
                      TEXT HERE
                    </p>
                    <ul class="list list-round-check orange-list">

                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="tab-pane active" id="responsive">
            <div class="row">
              <div class="col-md-12 col-sm-12">
                <div class="row">
                  <div class="col-md-6 animateme scrollme" data-when="enter" data-from="0.75" data-to="0" data-opacity="0" data-translatex="-400">
                    <img src="img/sections/tab-image-1.png" alt="" />
                  </div>
                  <div class="col-md-6 animateme scrollme" data-when="enter" data-from="0.75" data-to="0" data-opacity="0" data-translatex="400">
                    <h5 class="bold text-uppercase blue">Analytics details</h5>
                    <p>
                      TEXT HERE
                    </p>

                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="tab-pane" id="analytics">
            <div class="row">
              <div class="col-md-10 col-md-offset-1 col-sm-12">
                <div class="row">
                  <div class="col-md-6">
                    <h5 class="bold text-uppercase blue">Analytics details</h5>
                    <p>
                      TEXT HERE
                    </p>
                    <ul class="list list-round-check orange-list">

                    </ul>
                    <div class="designations clearfix">
                      <div class="last-year"><span></span>last year</div>
                      <div class="this-year"><span></span>this year</div>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="graph-line" id="graph-line3"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="tab-pane" id="customizable">
            <div class="row">
              <div class="col-md-10 col-md-offset-1 col-sm-12">
                <div class="row">
                  <div class="col-md-12">
                    <h5 class="bold text-uppercase blue">Analytics details</h5>
                    <p>
                      TEXT HERE
                    </p>
                    <ul class="list list-round-check orange-list">

                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="tab-pane" id="multipurpose">
            <div class="row">
              <div class="col-md-10 col-md-offset-1 col-sm-12">
                <div class="row">
                  <div class="col-md-12">
                    <h5 class="bold text-uppercase blue">Analytics details</h5>
                    <p>
                      TEXT HERE
                    </p>
                    <ul class="list list-round-check orange-list">

                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>



<section class="section-purchase orange-dark">
  <div class="container dark-content">
    <div class="row">
      <div class="col-md-2 col-sm-3 text-right logo-block">
        <img src="img/logo.png" alt="" />
        <div>Creative Agency</div>
      </div>
      <div class="col-md-offset-1 col-md-6 col-sm-6">
        <h3 class="bold">Drop us a line if you’d like to work with us</h3>
        <p>We’re always looking for new talent so join our team now</p>
      </div>
      <div class="col-md-2 col-sm-3 text-right">
        <a href="#" class="btn btn-default btn-transparent text-white">get in touch</a>
      </div>
    </div>
  </div>
</section>


<section class="section-skills">
  <div class="feature-section dark dark-strong">
    <div class="container dark-content">
      <div class="row">
        <div class="col-md-4">
          <div class="feature-item text-right animateme scrollme" data-when="enter" data-from="0.95" data-to="0" data-opacity="0" data-translatex="-300">
            <h5><span>01</span>Generate Ideas</h5>
            <p>
              TEXT HERE
            </p>
          </div>
          <div class="feature-item feature-divider text-right  animateme scrollme" data-when="enter" data-from="0.95" data-to="0" data-opacity="0" data-translatex="-300">
            <div class="feature-divider-item"></div>
          </div>
          <div class="feature-item text-right animateme scrollme" data-when="enter" data-from="0.95" data-to="0" data-opacity="0" data-translatex="-300">
            <h5><span>04</span>Launch & Deliver</h5>
            <p>
              TEXT HERE
            </p>
          </div>
        </div>
        <div class="col-md-4">
          <div class="wrap-feature-content">
            <img src="img/feature-background.png" alt="" />
            <div class="feature-content">
              <img src="img/logo-free.png" alt="" />
              <div class="feature-text">
                THE PROCESS
                <span>We Follow</span>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="feature-item right-feature-item animateme scrollme" data-when="enter" data-from="0.95" data-to="0" data-opacity="0" data-translatex="300">
            <h5>Preparing Briefs<span>02</span></h5>
            <p>
              TEXT HERE
            </p>
          </div>
          <div class="feature-item right-feature-item feature-divider animateme scrollme" data-when="enter" data-from="0.95" data-to="0" data-opacity="0" data-translatex="300">
            <div class="feature-divider-item"></div>
          </div>
          <div class="feature-item right-feature-item animateme scrollme" data-when="enter" data-from="0.95" data-to="0" data-opacity="0" data-translatex="300">
            <h5>Project Development<span>03</span></h5>
            <p>
              TEXT HERE
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>








<!-- ========================== -->
<!-- Section trust -->
<!-- ========================== -->
<section class="section-trust-us clearfix">
  <div class="trus-image">
    <img src="img/sections/section-trust-us-image.png" alt="" />
  </div>
  <div class="container">
    <div class="row">
      <div class="col-md-offset-6 col-md-6">
        <div class="section-heading">
          <div class="section-title">why trust us</div>
          <div class="section-subtitle">creating awesomeness</div>
        </div>
      </div>
      <div class="col-md-offset-6 col-md-6" data-wow-duration="2s">
        <div id="accordion-one" role="tablist" aria-multiselectable="true">
          <div class="panel panel-default panel-alt-two">

            <div class="panel-heading active" role="tab" id="headingOne">
              <h5 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion-one" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                            <span class="accordion-icon">
                                                <span class="stacked-icon">
                                                    <i class="icon-bulb"></i>
                                                </span>
                                            </span>
                                            TEXT HERE
                                        </a>
                                    </h5>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
              <div class="panel-body">
                <p>
                  TEXT HERE
                </p>
              </div>
            </div>

            <div class="panel-heading" role="tab" id="headingTwo">
              <h5 class="panel-title">
                                        <a class="collapsed" data-toggle="collapse" data-parent="#accordion-one" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                            <span class="accordion-icon">
                                                <span class="stacked-icon">
                                                    <i class="icon-rocket"></i>
                                                </span>
                                            </span>
                                            <b>TEXT HERE</b>
                                        </a>
                                    </h5>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
              <div class="panel-body">
                <p>
                  TEXT HERE
                </p>
              </div>
            </div>

            <div class="panel-heading" role="tab" id="headingThree">
              <h5 class="panel-title">
                                        <a class="collapsed" data-toggle="collapse" data-parent="#accordion-one" href="#collapseThree" aria-expanded="false" aria-controls="collapseTwo">
                                            <b>TEXT HERE</b>
                                            <span class="accordion-icon">
                                                <span class="stacked-icon">
                                                    <i class="icon-badge"></i>
                                                </span>
                                            </span>
                                        </a>
                                    </h5>
            </div>
            <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
              <div class="panel-body">
                <p>
                  TEXT HERE
                </p>
              </div>
            </div>
          </div>
          <!--panel-->
        </div>
        <!--accordion-->
      </div>
    </div>
  </div>
</section>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

您缺少id="works-section"

它的工作方式是你有一个页面,如
<a href="#someID">Some Title</a>

然后在标记中,您想要跳转到的链接,您可以放置​​相应的ID,如:
<section id="someID">…</section>

有道理吗?