使用正确的导航链接激活控制一页滚动

时间:2015-06-19 19:40:58

标签: html css twitter-bootstrap

我正在建立一个单页网站。您可以查看网站here.

问题是,如果你点击顶部导航栏中的“Om FantasyLab”,“Referanser”链接会被激活。 IT不应该是这样,但由于某种原因它会被激活。

另外,如何让背景开始的单页滚动停止?目前,它停在h1代码

以下是完整的HTML代码:

<body data-spy="scroll" data-offset="0" data-target="#myScrollspy" style="margin-top: 0">

<header id="hjem">
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation" id="myScrollspy">
        <div class="container-fluid" style=" border-bottom: 1px solid #101b49;"  >
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span> 
                    <span class="icon-bar"></span> 
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" rel="Hjem" href="#hjem" title="FantasyLab">
                <img src="images/fantasylab-logo.svg" style="width: 160px; margin-top: 5px;">
                </a>
            </div> <!-- navbar-header -->
            <div class="collapse navbar-collapse" id="collapse">
                <ul class="nav navbar-nav navbar-left">
                    <li><a href="#om-fantasylab">Om FantasyLab</a></li>
                    <li><a href="#referanser">Referanser</a></li>
                    <li><a href="#lansering">Lansering</a></li>
                    <li><a href="#kontakt">Kontakt</a></li>
                </ul>
                <div class="social pull-right" style="margin: 25px 140px 0 0">
                    <a href="#" title="Facebook"><i class="fa fa-facebook fa-2x"></i></a>
                    <a href="#" title="Twitter"><i class="fa fa-twitter  fa-2x"></i></a>
                    <a href="#" title="Google Plus"><i class="fa fa-google-plus  fa-2x"></i></a>
                    <a href="#" title="YouTube"><i class="fa fa-youtube  fa-2x"></i></a>
                </div> 
                 <a href="form.html" class="header-button btn btn-default navbar-btn pull-right" role="button">Bli kunde</a>
            </div> <!-- navbar-collapse -->
        </div> <!-- container -->
    </nav> 
</header> <!-- header -->

<div id="mycarousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="item active">
           <img src="images/banner.jpg" alt="" class="img-responsive">
           <div class="carousel-caption">
               <div class="container-fluid">
                    <h1 style="text-shadow: 0 0 10px #0089ea;">Vi er<br><strong>under utvikling.</strong></h1>
                   <p style="text-shadow: 0 0 10px #0089ea;">Lorem ipsum dolor sit amet consectetur loremsit amet consectetur lorem.</p>
                   <p style="text-shadow: 0 0 10px #0089ea;">Lorem ipsum dolor sit amet consectetur loremsit.</p>
                   <a class="btn btn-default" href="#" role="button">Om FantasyLab</a>
               </div> <!-- container-fluid -->
           </div> <!--carousel-caption -->
        </div> <!--item active -->
    </div> <!-- carousel-inner -->
            <a href="#om-fantasylab">
                <div class="numberCircle center-block">
                <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
                </div>
            </a>
</div> <!-- myCarousel -->

<div class="om-fantasylab container-fluid" id="om-fantasylab">
    <div class="row">
        <h1 class="text-uppercase">Lorem ipsum<br><span style="color: #e0349a;"><strong>dolor sit amet cons.</strong></span></h1>
        <div class="col-md-3">
            <h2 class="text-uppercase" style="color: #e0349a;">Hvem vi er</h2>
            <p>Lorem Ipsum er rett og slett dummytekst fra og for trykkeindustrien. Lorem Ipsum har vært bransjens standard for tekst. Ny tekst kommer snart. Lorem Ipsum har vært bransjens standard for tekst. </p>
        </div> <!-- col-md-3 -->
        <div class="col-md-3" >
            <h2 class="text-uppercase" style="color: #e0349a;">Hva vi gjør</h2>
            <p>Lorem Ipsum er rett og slett dummytekst fra og for trykkeindustrien. Lorem Ipsum har vært bransjens standard for tekst. Ny tekst kommer snart. Lorem Ipsum har vært bransjens standard for tekst. </p>
        </div> <!-- col-md-3 -->
        <div class="col-md-3">
            <h2 class="text-uppercase" style="color: #e0349a;">Hvordan vi jobber</h2>
            <p>Lorem Ipsum er rett og slett dummytekst fra og for trykkeindustrien. Lorem Ipsum har vært bransjens standard for tekst. Ny tekst kommer snart. Lorem Ipsum har vært bransjens standard for tekst. </p>
        </div> <!-- col-md-3 -->
        <div class="col-md-3">
            <h2 class="text-uppercase" style="color: #e0349a;">hvorfor vi gjør det</h2>
            <p>Lorem Ipsum er rett og slett dummytekst fra og for trykkeindustrien. Lorem Ipsum har vært bransjens standard for tekst. Ny tekst kommer snart. Lorem Ipsum har vært bransjens standard for tekst. </p>
        </div> <!-- col-md-3 -->
    </div> <!-- row -->
</div> <!-- om-fantasylab -->

<div class="referanser container-fluid" id="referanser">
    <div class="row">
        <h1 class="text-uppercase text-center" style="margin: 80px 0; text-transform: none; color:#3c4761">Våre fornøyde <span style="color: #3c4761;"><strong>klienter.</strong></span></h1>
        <div class="referanser-content col-md-6 col-sm-6">
            <a href="http://www.comcare.no" target="_blank" alt="ComCare Solutions">
                <img src="images/referanser-bilde.jpg">
                <div class="content-referanser">
                    <blockquote>
                      <h2 class="text-uppercase" style="color: #3c4761;">ComCare Solutions AS</h2>
                      <p><i>"Takk FantasyLab for et kjempe fint samarbeid. Dere har vært kreative, lyttende og virkelig sett meg under hele prosessen. Dere så mine behov og skapte en hjemmeside som har alle de tingene jeg ønsker. Er meget fornøyd å gir dere de beste anbefalinger videre."</i></p>
                      <footer>Aina Kise, Dagligleder - <cite title="Source Title">ComCare Solutions AS </cite></footer>
                    </blockquote>
                </div> <!-- content-referanser -->
            </a>
        </div> <!-- col-md-6 -->

        <div class="col-md-6 col-sm-6">
            <a href="http://www.topphelse.net" target="_blank" alt="Topp Helse">
                <img src="images/topp-helse.jpg">
                <div class="content-referanser">
                    <blockquote>
                      <h2 class="text-uppercase" style="color: #3c4761;">Topp Helse</h2>
                      <p><i>"Takk FantasyLab for et kjempe fint samarbeid. Dere har vært kreative, lyttende og virkelig sett meg under hele prosessen. Dere så mine behov og skapte en hjemmeside som har alle de tingene jeg ønsker. Er meget fornøyd å gir dere de beste anbefalinger videre."</i></p>
                      <footer>Nicolinn Dixon, Dagligleder - <cite title="Source Title">Topp Helse</cite></footer>
                    </blockquote>
                </div> <!-- content-referanser -->
            </a>
        </div> <!-- col-md-6 -->


    </div> <!-- row -->


        <div class="row" style="margin: 160px 0 40px 0; padding: 0 80px;">
            <h3 class="pull-left" style="margin-top: 30px; font-weight: 400;">Ønsker du å <span style="color: #6c56bf; font-weight:700;">bestille en webløsning?</span> Vi ser frem til en hyggelig prat!</h3>
                <a class="kontakt-knapp btn pull-right" href="#kontakt" role="button">Kontakt oss</a>
                <a class="bestill-knapp btn pull-right" href="#" role="button">Bestill webløsning</a>
        </div>
</div> <!-- referanser -->  

<div class="lansering container-fluid" id="lansering">
    <div class="row" style=" margin: 0 60px;">
        <img class="center-block" src="images/lansering.png" style="width: 200px; margin-top: 50px;">
        <div class="col-md-8 col-md-offset-2" >
            <h1 class="text-uppercase text-center" style="color: #fff;">Vi lanserer <span style="color:#00b4a2;"><strong>snart.</strong></span></h1>
            <p class="text-center" style="font-size: 18px; color:#fff;">Vi er rett rundt hjørnet! I mellomtiden, meld deg på vår nyhetsbrev for informasjon rundt lansering, kampanjer og nyheter innenfor informasjonsteknologi verdenen.</p>
            <div id="mc_embed_signup">
                <form action="//fantasylab.us10.list-manage.com/subscribe/post?u=d1f6a8e82535d2fcc14bfa66f&amp;id=36a4ce5a35" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
                    <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Din e-postadresse" required>
                    <div class="clear"><input type="submit" value="Meld deg på nyhetsbrev" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
                </form>
                <div id="mce-responses" class="clear">
                    <div class="response" id="mce-error-response" style="display:none"></div>
                    <div class="response" id="mce-success-response" style="display:none"></div>
                </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
            </div> <!-- mc_embed_signup -->
        </div> <!-- col-md-6 -->
    <img class="light" src="images/light.png">
    </div> <!-- row -->
</div> <!-- lansering -->               

<div class="kontakt container-fluid" id="kontakt">
    <div class="row" style=" margin: 0 60px;">
            <h1 class="text-uppercase text-center" style="color: #fff;">Ta kontakt <span style="color:#0089ea;"><strong>med oss</strong></span></h1>
            <p class="text-center" style="font-size: 18px; color:#fff;">Våre utviklere ser frem til å høre om dine behov.</p>           
      <div class="col-md-8 col-md-offset-2">
        <div class="well well-sm">
          <form class="form-horizontal" action="index.php" method="post">
          <fieldset>

            <!-- Name input-->
            <div class="form-group">
              <div class="col-md-12">
                <input id="cname" name="cname" type="text" placeholder="Firmanavn" class="form-control"> 
              </div>
            </div>

            <!-- Name input-->
            <div class="form-group">
              <div class="col-md-12">
                <input id="name" name="name" type="text" placeholder="Kontaktperson" class="form-control">
              </div>
            </div>

            <!-- Email input-->
            <div class="form-group">
              <div class="col-md-12">
                <input id="email" name="email" type="text" placeholder="Din e-postadresse" class="form-control">
              </div>
            </div>

            <div class="form-group" id="budsjett">
                <div class="radio">
                    <label class="col-md-2 control-label" for="budsjett">Ditt budsjett</label>
                  <label>
                    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
                    kr 5.000 - 15.000

                  </label>
                  <label>
                    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
                    kr 15.000 - 50.000
                  </label>
                  <label>
                    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
                    kr 50.000 +
                  </label>
                  <label>
                    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
                    N/A
                  </label>
                </div>                      
            </div>


            <!-- Message body -->
            <div class="form-group">
              <div class="col-md-12">
                <textarea class="form-control" id="message" name="message" placeholder="Vennligst skriv inn melding..." rows="5"></textarea>
              </div>
            </div>

            <!-- Form actions -->
            <div class="form-group">
              <div class="col-md-12 text-right">
                <button type="submit" class="kontakt-send btn btn-primary btn-lg">Send melding</button>
              </div>
            </div>
          </fieldset>

          </form>
        </div>
      </div>

                            <img class="light" src="images/light.png">
    </div> <!-- row -->
</div> <!-- kontakt -->

<footer>
    <div class="footer container-fluid">
        <div class="text-center">
            <div class="col-md-12">
                <ul class="list-inline text-center">
                    <li><a href="#">Hjem</a></li>
                    <li><a href="#">Om FantasyLab</a></li>
                    <li><a href="#">Referanser</a></li>
                    <li><a href="#">Lansering</a></li>
                    <li><a href="#">Kontakt</a></li>
                    <li><a href="form.html">Bli kunde</a></li>
                </ul>
                <div class="social center-block">
                    <a href="#" title="Facebook"><i class="fa fa-facebook fa-2x"></i></a>
                    <a href="#" title="Twitter"><i class="fa fa-twitter  fa-2x"></i></a>
                    <a href="#" title="Google Plus"><i class="fa fa-google-plus  fa-2x"></i></a>
                    <a href="#" title="YouTube"><i class="fa fa-youtube  fa-2x"></i></a>
                </div> 
                <p class="text-center" style="margin-top: 10px;">Copyright &copy; 2015 FantasyLab DA. NO 914 798 493.<span style="color:#5a68a2;"> Utviklet med <i alt="kjærlighet" class="fa fa-heart" style="color:#e17cb7;"></i> i Oslo, Norge.</span></p>               

            </div> <!-- col-md-12 -->
            <!--<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div>
            <div class="g-follow" data-annotation="bubble" data-height="20" data-href="//plus.google.com/u/0/113341766920062371221" data-rel="publisher"></div>
            -->
        </div> <!-- text-center -->
    </div> <!-- footer container -->
</footer> <!-- footer -->   

</body>  <!-- body -->

有什么方法可以解决这个问题吗?

提前致谢!

1 个答案:

答案 0 :(得分:1)

此网页使用锚点导航而不是javascript或jquery滚动条。检查animatescroll plugin ....将其添加到您的网站,然后转到

给你的每个链接id <script src="buttonHandler.js"> </script> ,然后像这样创建你自己的小jquery脚本:

{{1}}

将它保存在像buttonHandler.js这样的文件中,并在Jquery和动画滚动脚本之后将其添加到您的页面:

{{1}}