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