使用正确的导航链接激活控制一个页面滚动
使用正确的导航链接激活控制一个页面滚动
提问于 2015-06-20 03:40:58
我正在建立一个单页面的网站。您可以查看网站here.
问题是，例如，如果你点击顶部导航中的"Om FantasyLab“，"Referanser”链接就会被激活。它不应该是这样的，但由于某种原因，它被激活了。
另外，如何才能使单页滚动停止在背景开始处？目前，它仅限于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&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 © 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 -->有什么办法可以解决这个问题吗？
提前感谢！
Stack Overflow用户
发布于 2015-06-20 03:55:08
此网页使用锚点进行导航，而不是使用javascript或jquery滚动条。检查animatescroll plugin...把它添加到你的网站上，就可以了
给你的每个id加上类似<a href="#" id="button1">Om Fantasylab</a>的链接，然后创建你自己的小jquery脚本，如下所示：
$(window).load(function() {
$('#button1').click(function(){
$('#om-fantasylab').animatescroll();
});
.. same with rest of your buttons ..
});将其保存在类似buttonHandler.js的文件中，并在Jquery和动画滚动脚本之后将其添加到页面中：
<script src="buttonHandler.js"> </script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30946065
复制相关文章
相似问题
腾讯云开发者
