Scrollspy-在导航上单击Chrome滚动，IE和FF不会

Question

Clicking on navbar scrolls the page correctly in Chrome, nothing happens in FF and IE. Any idea? Here's a part of my nav's jsx:

handleOnClick (e) {
    e.preventDefault();
    if (this.props.show) {
        var target = $(e.target.parentElement);
        var el = $('#section-' + this.props.id);
        $('.list-group-item').removeClass('active');
        $('.scrollspy').removeClass('scrollspy-active');
        target.addClass('active');
        $('body').animate(
            {scrollTop: (el.offset().top - 20)},
            {
                duration: 200,
                done: () => {
                    $('.scrollspy').addClass('scrollspy-active'); 
                }
            });
        this.props.onSelected(e, this.props.id);
        if ($(window).width() <= 992) {
            $('.collapse').collapse('hide');
        }
    }
};

UPDATE: And here's my nav.html. Forgive me if it's too much. Forums say that there used to be a scrollspy's problem regarding FF and IE that was releted to height but it doesn't seem to be that one.

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">

      <!-- Main navigation -->
      <ul class="nav navbar-nav">
        {% for nav_item in nav %}
        {% if nav_item.children %}
        <li class="dropdown{% if nav_item.active %} active{% endif %}">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{ nav_item.title }} <b class="caret"></b></a>
          <ul class="dropdown-menu">
            {% for nav_item in nav_item.children %}
            {% include "nav-sub.html" %}
            {% endfor %}
          </ul>
        </li>
        {% else %}
        <li {% if nav_item.active %}class="active"{% endif %}>
          <a href="{{ nav_item.url }}">{{ nav_item.title }}</a>
        </li>
        {% endif %}
        {% endfor %}
      </ul>
      {% endif %}
      <ul class="nav navbar-nav navbar-right">
        {% if repo_url %}
        <li>
          <a href="{{ repo_url }}">
            {% if repo_name == 'GitHub' %}
            <i class="fa fa-github"></i>
            {% elif repo_name == 'Bitbucket' %}
            <i class="fa fa-bitbucket"></i>
            {% endif %}
            {{ repo_name }}
          </a>
        </li>
        {% endif %}
      </ul>
    </div>

Answer 1

It was about changing

$('body').animate(

to

$('html,body').animate(