页面向上滚动jquery中的问题

时间:2016-09-28 08:52:58

标签: jquery html css

我想滚动页面设置以查看页面向上按钮中的端口。我在Drupal.with一个块视图行中完成此操作它正常工作。当div在第四个div4页面向上按钮时单击跳过div 3并转到div 2。

 $('.classtest').height($(window).height());
    $('.classtest').first().addClass('scroll');
     $(document).on('keydown', function (e) {
       var scroll = $('.scroll');
     if(e.keyCode == 34 ){
           
            next = scroll.next();
            
            if (next.length) {
                var timer = setTimeout(function () {
                    
                    $('body, html').animate({
                        scrollTop: next.offset().top
                    }, 'slow');
                    
                   
                    next.addClass('scroll')
                        .siblings().removeClass('scroll');
                    
                    clearTimeout(timer);
                }, 0);
            }
        } else if(e.keyCode == 33 ){
           //mousewheel up handler
            prev = scroll.prev();
               
            if (prev.length) {
				
                    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);
					
            }

        }
    });
.views-row-1,.views-row-2,.views-row-3{
            min-height:100vh;
			max-height:100vh;
       }
	   .views-row-1{
	   background-color:red;
	   }
	   .views-row-2{
	   background-color:blue;
	   }
	   .views-row-3{
	   background-color:green;
	   }
<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" >div1
   </div>
  
  <div class="views-row views-row-2 views-row-even classtest" >div2
  </div>
  <div class="views-row views-row-3 views-row-odd views-row-last classtest">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">
   div 4 
    </div>
    </div>
</div></div>  </div>
</div>

0 个答案:

没有答案
相关问题