页面向上滚动在jquery中不起作用

时间:2016-09-27 10:18:33

标签: jquery html css

我想在页面向上滚动页面设置以查看端口按钮。我在Drupal.with一个块视图中完成了这一行 - 它工作正常。我想为两个块完成此操作。同时与两个块集成“滚动”类没有附加到横幅的最后一个视图。

$('.views-row').height($(window).height());
    $('.views-row').first().addClass('scroll');
     $(document).on('keydown', function (e) {
       var scroll = $('.scroll');
     if(e.keyCode == 34 ){
            //mousewheel down handler
            next = scroll.next();
            //check if the next section exist and animate the anchoring
			
            if (next.length>0) {
                var timer = setTimeout(function () {
                    
                    $('body, html').animate({
                        scrollTop: next.offset().top
                    }, 'slow');
                    
                   
                    next.addClass('scroll')
                        .siblings().removeClass('scroll');
                    
                    clearTimeout(timer);
                }, 0);
            }
            else if(next.length==0){
				$('#block-views-home-banner-block .classtest').removeClass('scroll');
				$('#block-views-customerspeak-block .classtest').addClass('scroll')
			}
        } else if(e.keyCode == 33 ){
           //mousewheel up handler
            prev = scroll.prev();
               
            if (prev.length) {
				if($('.view-customerspeak .classtest').hasClass('scroll')) {
                    console.log("success");					
				    $('#block-views-customerspeak-block .classtest').removeClass('scroll');
					$('#block-views-home-banner-block').last('.classtest').addClass('scroll');
					var timer = setTimeout(function () {
                    $('body, html').animate({
                        scrollTop: prev.offset().top
                    }, 'slow');

                    prev.addClass('scroll')
                        .siblings().removeClass('scroll');
                    
                    clearTimeout(timer);
                }, 0);
				 }
				else{
                   var timer = setTimeout(function () {
                    $('body, html').animate({
                        scrollTop: prev.offset().top
                    }, 'slow');

                    prev.addClass('scroll')
                        .siblings().removeClass('scroll');
                    
                    clearTimeout(timer);
                }, 0);
			}	
            }

        }
    });
.views-row-1,.views-row-2,.views-row-3{
  min-height:100vhl;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="region region-content-main">
    <div id="block-views-home-banner-block" class="block block-views contextual-links-region">
<div class="view-content">
        <div class="views-row views-row-1 views-row-odd views-row-first classtest" style="height: 445.781px;">div1
   </div>
  
  <div class="views-row views-row-2 views-row-even classtest" style="height: 445.781px;">div2
  </div>
  <div class="views-row views-row-3 views-row-odd views-row-last classtest" style="height: 445.781px;">div3
   </div>
  </div>
</div></div>

<div id="block-views-customerspeak-block" class="block block-views contextual-links-region">

  <div class="content">
    <div id="customerspeak">
<div class="view view-customerspeak view-id-customerspeak view-display-id-block view-dom-id-4e68752def5318cb93acda980e657d95">
      <div class="view-content">
        <div class="views-row views-row-1 views-row-odd views-row-first views-row-last classtest scroll" style="height: 432px;">
   div 4 
    </div>
    </div>
</div></div>  </div>
</div>

0 个答案:

没有答案