我想滚动页面设置以查看页面向上按钮中的端口。我在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>