Why is my smooth scrolling function not working?

user_13415087 0
Viewed 445

I'm creating a website using Django, and I want the link in the navbar (when clicked) to smoothscroll to the element that I want. This is what I have:

base.html

          <li>
            <a class="nav-item nav-link" href = '' class='scroll-about'>About</a>
          </li>

//unrelated elements

 <script>
    // scroll into view
  document.querySelector('.scroll-about').addEventListener('click', function(e) {
    e.preventDefault();
    document.querySelector('.about').scrollIntoView({ behavior: 'smooth' });
  });

home.html

    <div class="about col-12 col-md-6">
  <div class="d-flex flex-column align-items-center py-5 text-uppercase">
    <h3 class="h3-responsive bg-primary text-center text-white rounded font-weight-bold w-50 px-4 py-2 shadow">About</h3>
    <h1 data-easy-reveal = "" class = " h1-reponsive font-weight-bold my-5 ml-3">Our vision is for every business to leave its mark on the digital world</h1>
    <h1 data-easy-reveal = "" class = "down h1-reponsive font-weight-bold ml-3">Our vision is to bring them to the next level </h1>
  </div>      
</div>

The rest of the code works fine, the Django templating is all fine. I just can't seem to get this scroll function to work. I've tried moving the script around the bottom of the html file, and as well as putting it in the head element of the html file. I've also tried using jQuery smooth scroll and it doesn't work either.

the jQuery code I tried (in this case I put scroll-about and about as the respective IDs):

<script>    
$("#scroll-about").click(function() {
    $([document.documentElement, document.body]).animate({
        scrollTop: $("#about").offset().top
    }, 2000);
});
</script>
django html jquery javascript
2 Answers

i think that this is what you are trying to do. note that it works just with a tags with href="#something"

$(document).ready(function(){
  // Add smooth scrolling to all links
  $("a").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
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height: 100vh; background: #00ced1">
<a id="1" href="#2">Go to Section 2</a>
</div>
<div style="height: 100vh; background: red;">
<a id="2" href="#1">Go to Section 1</a>
</div>

user_131405080

I've found the solution to the issue, adding this allows it to work:

html {
  scroll-behavior: smooth;
}
user_134150870
Related