прокрутка вверх и вниз по кнопке div на кнопке с помощью jquery

Question

Я пытаюсь добавить функцию для прокрутки вверх и вниз по div на основе нажатия кнопки. Я смог легко прокрутить вниз часть, но застрял в остроконечной части, и еще одна проблема была сценарием, который я объясню,

Нажмите кнопку «Вниз».

и если я вручную прокручу вниз, перетащив вниз по полосе прокрутки.

и теперь, если я снова нажму на кнопку «Вниз», полоса прокрутки переместится в предыдущую позицию, так как переменная, назначенная значением прокрутки, имеет старое значение вместо того, чтобы обнаруживать текущую позицию скроллера. Я добавлю ссылку jsfiddle, чтобы показать мою работу, а также вставить код. Что я мог делать неправильно с параметром прокрутки?

http://jsfiddle.net/xEFq5/7/

var scrolled=0; 

$(document).ready(function(){ 


$("#downClick").on("click" ,function(){ 
    scrolled=scrolled+300; 

    $(".cover").animate({ 
     scrollTop: scrolled 
    }); 

}); 


$("#upClick").on("click" ,function(){ 
    scrolled=scrolled-300; 

    $(".cover").animate({ 
     scrollBottom: scrolled 
    }); 

}); 


$(".clearValue").on("click" ,function(){ 
    scrolled=0; 
}); 


}); 


<div class='header'><button id='upClick'>Go Up</button> <button id='downClick'>Go Down</button><button class='clearValue'>Clear Value</button> </div> 


<div class='cover'><div class='rightSection'></div></div> 

также есть хороший плагин, который имеет эту функцию ??

Answer 1

scrollBottom не метод в JQuery.

ОБНОВЛЕНО DEMO - http://jsfiddle.net/xEFq5/10/

Попробуйте это:

$("#upClick").on("click" ,function(){ 
    scrolled=scrolled-300; 
     $(".cover").animate({ 
      scrollTop: scrolled 
    }); 
    }); 

Answer 2

Для идти, вам просто нужно использовать scrollTop вместо scrollBottom:

$("#upClick").on("click", function() { 
    scrolled = scrolled - 300; 
    $(".cover").stop().animate({ 
     scrollTop: scrolled 
    }); 
}); 

Кроме того, используйте .stop() метод для остановки текущего запущенного анимации на cover дел. Когда .stop() вызывается в элементе, текущая анимация (если есть) немедленно останавливается.

FIDDLE DEMO

Answer 3

Откуда она взялась scrollBottom это не является допустимым свойством должно быть scrollTop, и это может быть положительным (+) или отрицательным (-) для прокрутки вниз (+) и вверх (-), поэтому вы можете изменить:

scrollBottom 

scrollTop к этому:

$("#upClick").on("click", function() { 
    scrolled = scrolled - 300; 

    $(".cover").animate({ 
     scrollTop: scrolled 
    });//^^^^^^^^------------------------------this one 
}); 

Answer 4

Чтобы решить другую проблему, где вам необходимо установить scrolled, если прокрутке вручную, вы должны прикрепить обработчик события окна прокрутки. Как правило, это плохая идея, так как обработчик будет срабатывать много, общий метод, чтобы установить тайм-аут, например, так:

var timer = 0; 
$(window).scroll(function() { 
    if (timer) { 
    clearTimeout(timer); 
    } 
    timer = setTimeout(function() { 
    scrolled = $(window).scrollTop(); 
    }, 250); 
}); 

Answer 5

Прокрутка ДИВ на нажатие кнопки.

HTML код: -

<div id="textBody" style="height:200px; width:600px; overflow:auto;"> 
    <!------Your content----> 
</div> 

JQuery код для прокрутки DIV: -

$(function() { 
    $("#upBtn").click(function(){ 
     $('#textBody').scrollTop($('#textBody').scrollTop()-20); 
}); 

$("#downBtn").click(function(){ 
    $('#textBody').scrollTop($('#textBody').scrollTop()+20);; 
}); 

}); 

Answer 6

Вы можете использовать этот простой плагин для добавления scrollUp и scrollDown к вашему JQuery

https://github.com/phpust/JQueryScrollDetector

Answer 7

Просто чтобы добавить к другим статьям ts - стоило бы отключить прокрутку вверх, пока вверху страницы. Если пользователь случайно прокручивается вверх в то время как уже в верхней части они должны прокрутить вниз дважды, чтобы начать

if(scrolled != 0){ 
    $("#upClick").on("click" ,function(){ 
    scrolled=scrolled-300; 
     $(".cover").animate({ 
      scrollTop: scrolled 
    }); 
    }); 
}