Scroll to anchor JS not working

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.

Answer 1

You forgot to add your class name scroll to your first three anchor tags that you want smooth scrolling

  <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>

Scroll to anchor JS not working

Question

1 answers

solution1
0 ACCPTED 2017-04-02 22:02:05

Scroll to anchor JS not working

Question

1 answers

solution1 0 ACCPTED 2017-04-02 22:02:05

solution1
0 ACCPTED 2017-04-02 22:02:05