单页部分滚动向上和向下

时间:2016-06-08 19:38:43

标签: jquery

我在Firefox下面遇到了我的代码问题。它假设通过单击具有这些类的元素来上下滚动部分。没有错误,没有可见的问题只是不滚动。它虽然在Chrome和Safari中运行良好。任何人都可以提出可能导致问题的原因吗?

      $(function() {
        var $window = $(window);
        $('.arrow-icon-down').click(function(event) {
            event.preventDefault();
            $('.page-scroll').each(function() {
                var pos = $(this).offset().top;
                console.log('down');
                if ($window.scrollTop() < pos) {
                    $('body').animate({
                        scrollTop: pos
                    }, 1000);
                    return false;
                }
            });
        });

        $('.arrow-icon-up').click(function(event) {
            event.preventDefault();
            $($('.page-scroll').get().reverse()).each(function() {
                var pos = $(this).offset().top;
                console.log('up');
                if ($window.scrollTop() > pos) {
                    $('body').animate({
                        scrollTop: pos
                    }, 1000);
                    return false;
                }
            });
        });
    });

html结构是:

 <div class="page-scroll page-container clearfix hp-bkg" id="home">
   <div class="container fill-color"></div>
 </div>
 <div class="page-scroll page-container clearfix hp-bkg" id="overview">
   <div class="container fill-color"></div>
 </div>
 <div class="page-scroll page-container clearfix hp-bkg" id="contact">
   <div class="container fill-color"></div>
 </div>

 <div class="container-fluid fixed-block hidden-xs">
   <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 right">
     <a href="#" class="arrow-icon-up"></a>
     <a href="#" class="arrow-icon-down"></a>
   </div>
 </div>

每页.page-scroll的高度都是100vh。

提前谢谢。

0 个答案:

没有答案