滚动以锚定JS无法正常工作
[英]Scroll to anchor JS not working
问题描述
所以我试图实现的是标题所说的。 到目前为止，我已经浏览了很多线程和网站，但是无法让它运行起来。
当他们有足够的时间滚动可编辑时，我可以看到不同的脚本工作。 它只是不能平滑滚动，它会在那之后跳转到锚点。
我目前使用的是：
<!DOCTYPE html> <html lang="en"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function() { var hashTagActive = ""; $(".scroll").click(function (event) { if(hashTagActive != this.hash) { //this will prevent if the user click several times the same link to freeze the scroll. event.preventDefault(); //calculate destination place var dest = 0; if ($(this.hash).offset().top > $(document).height() - $(window).height()) { dest = $(document).height() - $(window).height(); } else { dest = $(this.hash).offset().top; } //go to destination $('html,body').animate({ scrollTop: dest }, 2000, 'swing', function(){ hashTagActive = ""; }); hashTagActive = this.hash; } }); }); </script> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="navbar"> <ul> <li><a href="#1">Tervetuloa</a></li> <li><a href="#2">Sivupohjia</a></li> <li><a href="#3">Tilaa sivut</a></li> <li><a href="etusivu.html#4">Linkki</a></li> <li><a href="etusivu.html#5">Linkki</a></li> <li><a href="etusivu.html#6">Linkki</a></li> <li><a href="etusivu.html#7">Linkki</a></li> <li><a href="etusivu.html#8">Linkki</a></li> <li><a href="etusivu.html#9">Linkki</a></li> <li><a href="etusivu.html#10">Linkki</a></li> </ul> </div> <div class="container"> <div class="wrapper"> <div class="content_primary"> <a name="1" id="1"></a> <h3>Tervetuloa</h3> <p>Tekstiä</p> </div> </div> <div class="wrapper"> <div class="content_secondary"> <a name="2" id="2"></a> <h3>Sivupohjia</h3> <p>Tulossa</p> </div> </div> <div class="wrapper"> <div class="content_primary"> <a name="3" id="3"></a> <h3>Tilaa</h3> <p>Tekstiä</p> </div> </div> </div> <div class="footer"> <p>© Marko Ahola</p> </div> </body> </html>
我根本不知道从哪里开始。 我没有这方面的经验，我只是一个业余爱好者。 任何帮助表示赞赏。
我的网站运行在Raspberry PI和Apache2上。
1 个解决方案
解决方案1
0 已采纳 2017-04-02 22:02:05
您忘了将类名scroll添加到您想要平滑滚动的前三个锚标记
<li><a href="#1" class="scroll">Tervetuloa</a></li>
<li><a href="#2" class="scroll">Sivupohjia</a></li>
<li><a href="#3" class="scroll">Tilaa sivut</a></li>
下面的片段
<!DOCTYPE html> <html lang="en"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> $(document).ready(function() { var hashTagActive = ""; $(".scroll").click(function(event) { if (hashTagActive != this.hash) { //this will prevent if the user click several times the same link to freeze the scroll. event.preventDefault(); //calculate destination place var dest = 0; if ($(this.hash).offset().top > $(document).height() - $(window).height()) { dest = $(document).height() - $(window).height(); } else { dest = $(this.hash).offset().top; } //go to destination $('html,body').animate({ scrollTop: dest }, 2000, 'swing', function() { hashTagActive = ""; }); hashTagActive = this.hash; } }); }); </script> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="navbar"> <ul> <li><a href="#1" class="scroll">Tervetuloa</a></li> <li><a href="#2" class="scroll">Sivupohjia</a></li> <li><a href="#3" class="scroll">Tilaa sivut</a></li> <li><a href="etusivu.html#4">Linkki</a></li> <li><a href="etusivu.html#5">Linkki</a></li> <li><a href="etusivu.html#6">Linkki</a></li> <li><a href="etusivu.html#7">Linkki</a></li> <li><a href="etusivu.html#8">Linkki</a></li> <li><a href="etusivu.html#9">Linkki</a></li> <li><a href="etusivu.html#10">Linkki</a></li> </ul> </div> <div class="container"> <div class="wrapper"> <div class="content_primary"> <a name="1" id="1"></a> <h3>Tervetuloa</h3> <p>Tekstiä</p> </div> </div> <div class="wrapper"> <div class="content_secondary"> <a name="2" id="2"></a> <h3>Sivupohjia</h3> <p>Tulossa</p> </div> </div> <div class="wrapper"> <div class="content_primary"> <a name="3" id="3"></a> <h3>Tilaa</h3> <p>Tekstiä</p> </div> </div> </div> <div class="footer"> <p>© Marko Ahola</p> </div> </body> </html>
使用js滚动到锚点
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.