CODEWITHSUNDEEP
htmljquery
BruceyBandit
BruceyBandit

Reputation: 4324

smooth scroll anchor links not happening - just jumps to section rather than scroll

I want to use smooth scrolling for my anchor links only just like displayed here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_smooth_scroll_jquery

So I have set my jquery code like so with the gollowing html but the scrolling doesn't seem to take affect (chrome). Not sure what I am doing incorrectly:

$(document).ready(function(){
  // Add smooth scrolling to all links
  $("a[href^="#"]").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});

HTML:

<ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/../#top">HOME</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/../#about">ABOUT</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/../#courses">COURSES</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/../#services">SERVICES</a>
                    </li>
                    <li class="nav-item">
                    <a class="nav-link" href="/../#testimonials">TESTIMONIALS</a>
                  </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/../#contact">CONTACT</a>
                    </li>
                </ul>

Upvotes: 0

Views: 338

Answers (1)

FluffyKitten
FluffyKitten

Reputation: 14312

1. You have an error in your code - there would have been an error in the console if you had checked. You have nested " in the following line:

$("a[href^="#"]").on('click', function(event) {

You can either do $('a[href^="#"]') or $("a[href^=\"#\"]")

2. Also make sure you have this code on the page you are linking to! I see your URLs are relative so I presume the links are going to a different page.

Here is your code in a working snippet (I changed the links to be on the same page so you can see them in action).

$(document).ready(function() {
  // Add smooth scrolling to all links
  // CHANGE THIS LINE - you can't nest double quotes 
  $("a[href^=\"#\"]").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function() {

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});
p{ margin-bottom:3em;}
<a id="top" name="top"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

  <ul class="navbar-nav ml-auto">
    <li class="nav-item">
      <a class="nav-link" href="#top">HOME</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#about">ABOUT</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#courses">COURSES</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#services">SERVICES</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#testimonials">TESTIMONIALS</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#contact">CONTACT</a>
    </li>
  </ul>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <a id="about" name="about">
  <h2>About</h2>
  <p><a href="#top">Go to top...</a></p>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <a id="courses" name="courses">
  <h2>Courses</h2>
  <p><a href="#top">Go to top...</a></p>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <a id="services" name="services">
  <h2>Services</h2>
  <p><a href="#top">Go to top...</a></p>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <a id="testimonials" name="testimonials">
  <h2>Testimonials</h2>
  <p><a href="#top">Go to top...</a></p>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <a id="contact" name="contact">
  <h2>Contact</h2>

Upvotes: 1

Related Questions