Why is my jQuery animate function not working?

Question

I am creating a scroll-down button and also I am creating a scroll-to-top button.

I have created both buttons but when I click on any of them they are not scrolling and I do not know why is that. I have tried everything and still is not working. I have even used a code which works perfectly on other websites that I have developed but still nothing..

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" name="viewport" />
<!--<link rel="shortcut icon" href="icons/favicon.ico" type="image/x-icon">
<link rel="icon" href="icons/favicon.ico" type="image/x-icon">-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link title="main_css" rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
<script src="js/main.js" type="text/javascript"></script>
 </head>


<body style="background:#FFF !important;">
<a id="button"></a> <!-- THIS IS THE SCROLL TO TOP BUTTON -->
<!--NAVIGATION AND HEADER SECTION-->
<nav class="navbar about-navbar">
    <a href="index.html" class="navbar-brand">
        <img class="logo-desktop" src="icons/logo-white.svg">
        <img class="logo-small" src="icons/logo-white.svg">
    </a>
    <ul class="nav justify-content-end">
        <li class="nav-item about-nav-item">
            <a class="nav-link" href="index.html">Home</a>
        </li>
        <li class="nav-item about-nav-item">
            <a class="nav-link active" href="about.html">About</a>
        </li>
        <li class="nav-item about-nav-item">
            <a class="nav-link" href="gallery.html">Gallery</a>
        </li>
        <li class="nav-item about-nav-item">
            <a class="nav-link" href="contact.html">Contact</a>
        </li>
        <div class="push-button">
            <div class="top-line"></div>
            <div class="middle-line"></div>
            <div class="middle-line under"></div>
            <div class="bottom-line"></div>
        </div>
    </ul>
</nav>
<div class="container-fluid header-section about-header-section">
    <div class="about-bg"></div>
    <div class="inside-element">
        <div class="col-12 col-lg-8 about-section-text">
            <div class="main-heading-text-box about-main-box">
                <h1 class="font-weight-light">We <span style="color: #16E1F5;">care</span> about people</h1>
                <h5 class="lead">Give a helping hand for poor people</h5>
                <a href="donate.html" class="about-donate-btn donate_button">
                    <p class="first">Donate</p>
                    <p class="second">Donate</p>
                    <img src="icons/right_white.svg" alt="">
                </a>
            </div>
            </div>
      <!-- THIS IS THE SCROLL DOWN BUTTON -->
        <div class="scroll-down">Scroll</div>
        <div class="vertical-divider"></div>
    </div>
     </div>

Below is the code in main.js:

  $(document).ready(function () {

    $(".scroll-down").click(function () {
      return $("html, body").animate({
        scrollTop: $("#about").offset().top - 64
      }, 800);
    });

    var $document = $(document),
        $element1 = $('#button'),
        changed = 'show';

    if ($document.scrollTop() >= 500) {
      $element1.removeClass(changed);
    } else {
      $element1.addClass(changed);
    }

    $(window).scroll(function () {
      var $document = $(document),
          $element1 = $('#button'),
          changed = 'show';
      if ($document.scrollTop() >= 150) {
        $element1.removeClass(changed);
      } else {
        $element1.addClass(changed);
      }
    });
    $('#button').click(function () {
      $("html, body").animate({ scrollTop: 0 }, 100);
      return false;
    });
});

I don't do much jQuery anymore. But this `.scrollTo` library was a nice addon for animating scroll. https://github.com/flesler/jquery.scrollTo — mccambridge, Mar 25 '19 at 17:17
I see some definition issues. For example, `$("#about").offset().top`, there is no element with id `about`. Therefore no `top` is defined. — Twisty, Mar 26 '19 at 18:35

score 0 · Answer 1 · answered Mar 25 '19 at 17:05

0

I'm not sure if you can animate both html and body? Why don't you give a div a solid ID and animate that, should work for you.

answered Mar 25 '19 at 17:05

Al Katawazi

7,192
6
26
39

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

I suspect you are trying to follow: Is it possible to animate scrollTop with jQuery?

Please see: https://jsfiddle.net/Twisty/e3x42Lnm/

When you use animate, you want to set a Pixel value to scroll to:

$('#button').click(function(e) {
  e.preventDefault();
  log("Button Click");
  $("html, body").animate({
    scrollTop: "0px"
  }, 500, function() {
    log("Scroll Animation Complete")
  });
});

There was a lot of elements that appeared to be missing. Hence my Fiddle is more of an example and would need to be adapted to your specific code. In the future, please provide a Minimal, Complete, and Verifiable example.

Hope that helps.

Why is my jQuery animate function not working?

2 Answers2