【问题标题】:Animate scroll not working in firefox?动画滚动在 Firefox 中不起作用?
【发布时间】:2014-11-26 13:50:26
【问题描述】:

html:

<div class="container-fluid hidden-md hidden-lg">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <div  style="z-index: 1;" class="visible-xs visible-sm"><a href="index.html"><img id="bizviz_logos" src="resources/images/logoaccses.png"  class="img-responsive" alt="Responsive image"></a></div>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
             <ul id="menu" class="nav navbar-nav navbar-right">


<li class="dropdown">
          <a href="#" class="dropdown-toggle" id="menu_scroll" data-toggle="dropdown">Support <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="downloadtrailversion.html">Download </a></li>
            <li><a href="blogs.html">Blog</a></li>
            <li><a href="whitepaper.html">Papers</a></li>
            <li><a href="gallery.html">Gallery</a></li>
            <li><a href="documentation.html">Document</a></li>
            <li><a href="licenseassistance.html">License</a></li>
            <li><a href="submitproblem.html">Problem</a></li>
            <li><a href="videos.html">Videos</a></li>
            <li><a href="faq.html" class="dropdown-toggle">FAQ</a></li>
          </ul>
        </li>

             </ul>
        </div>
    </div>

jQuery:

$(document).on('click','#menu_scroll',function(e){
                event.preventDefault();

                $('.navbar-collapse.in').animate({scrollTop: 100}, 250);

})

如上所述,我使用 jquery 进行滚动。当我单击网站标题中的菜单项(引导移动 - 切换按钮)时...它在 chrome 中工作正常,但在 Firefox 中它不工作(滚动没有发生) .任何帮助将不胜感激..

【问题讨论】:

  • 你能给我们一个小提琴吗?您正在绑定到“#menu_scroll”,但我在您的 html 中看不到具有该 ID 的元素。您的 html 似乎也没有 .navbar-collapse.in
  • 已经更新了我的代码@artm

标签: javascript jquery html css twitter-bootstrap


【解决方案1】:

试试这个代码

$(document).ready(function () {

        // hide #back-top first
        $("#back-top").hide();

        // fade in #back-top
        $(function () {
            $(window).scroll(function () {
                if ($(this).scrollTop() > 100) {
                    $('#back-top').fadeIn();
                } else {
                    $('#back-top').fadeOut();
                }
            });

            // scroll body to 0px on click
            $('#topanimated a').click(function () {
                $('body,html').animate({
                    scrollTop: 0
                }, 800);
                return false;
            });
        });

    });

在按钮 id="back-top" 中设置此 ID

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2011-12-30
    • 2011-03-24
    • 2014-07-18
    • 2015-09-05
    • 2018-06-25
    相关资源
    最近更新 更多