Scrollspy - 导航点击Chrome滚动,IE& FF没有

时间:2017-08-24 17:33:09

标签: javascript jquery twitter-bootstrap

点击导航栏在Chrome中正确滚动页面,FF和IE中没有任何反应。 任何的想法? 这是导航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');
        }
    }
};

更新:这是我的nav.html。请原谅我,如果它太多了。 论坛上说曾经存在一个关于FF和IE的卷轴问题,这个问题与高度相关但似乎不是那个。

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

1 个答案:

答案 0 :(得分:0)

这是关于改变

$('body').animate(

$('html,body').animate(