滚动以锚定JS无法正常工作

Question

So what I try to achieve is as the title says. 所以我试图实现的是标题所说的。 I've gone through quite many threads and websites so far, but just can not get it working. 到目前为止，我已经浏览了很多线程和网站，但是无法让它运行起来。

I can somehow see different scripts working when they have the time it takes to scroll editable. 当他们有足够的时间滚动可编辑时，我可以看到不同的脚本工作。 It just doesn't scroll smoothly, it jumps to the anchor after that time. 它只是不能平滑滚动，它会在那之后跳转到锚点。

What I am currently using: 我目前使用的是：

 <!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>&copy;&nbsp;Marko&nbsp;Ahola</p> </div> </body> </html>

I simply have no idea where to go from here. 我根本不知道从哪里开始。 I have no experience in this, I'm just a hobbyist. 我没有这方面的经验，我只是一个业余爱好者。 Any help is appreciated. 任何帮助表示赞赏。

I have the website running on a Raspberry PI and Apache2. 我的网站运行在Raspberry PI和Apache2上。

Answer 1

You forgot to add your class name scroll to your first three anchor tags that you want smooth scrolling 您忘了将类名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>

Snippet below 下面的片段

 <!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>&copy;&nbsp;Marko&nbsp;Ahola</p> </div> </body> </html>

滚动以锚定JS无法正常工作

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-04-02 22:02:05

滚动以锚定JS无法正常工作

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-04-02 22:02:05

解决方案1
0 已采纳 2017-04-02 22:02:05