scorrere verso l'alto e verso il basso su un pulsante per fare clic su jquery

Question

Sto tentando di aggiungere una funzione per scorrere verso l'alto e verso il basso di un div in base al clic del pulsante. Sono stato in grado di eseguire facilmente la parte di scorrimento verso il basso, ma sono rimasto bloccato con la parte di scorrimento e un'altra preoccupazione era uno scenario, che spiegherò,

Fare clic sul pulsante "Vai giù".

e se si scorre manualmente verso il basso trascinando verso il basso la barra di scorrimento.

e ora, se faccio di nuovo clic sul pulsante Vai giù, la barra di scorrimento andrà alla posizione precedente, poiché la variabile assegnata con il valore per lo scorrimento ha un valore vecchio invece di rilevare la posizione corrente dello scroller. Aggiungerò un collegamento jsfiddle per mostrare il mio lavoro e anche incollare il codice. Cosa potrei fare di sbagliato con l'opzione di scroll up !!

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> 

è anche lì un buon plugin che ha questa funzionalità ??

Answer 1

scrollBottom non è un metodo in jQuery.

demo aggiornata - http://jsfiddle.net/xEFq5/10/

Prova questo:

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

Answer 2

Per salire, basta utilizzare scrollTop invece di scrollBottom:

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

Inoltre, utilizzare il metodo per .stop()fermata l'animazione attualmente in esecuzione sul cover div. Quando .stop() viene richiamato su un elemento, l'animazione attualmente in esecuzione (se presente) viene immediatamente interrotta.

FIDDLE DEMO

Answer 3

da dove è venuto da scrollBottom questa non è una proprietà valida dovrebbe essere scrollTop e questo può essere positivo (+) o negativo (-) valori per scorrere verso il basso (+) e fino (-), in modo da poter cambiare:

scrollBottom 

a questo scrollTop:

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

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

Answer 4

per risolvere il tuo altro problema, in cui è necessario impostare scrolled se l'utente scorre manualmente, che avrebbe dovuto collegare un gestore all'evento finestra di scorrimento. In generale questa è una cattiva idea, come il gestore sparerà molto, una tecnica comune è quella di impostare un timeout, in questo modo:

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

Answer 5

Scorrimento div al click del pulsante.

codice HTML: -

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

codice jQuery per div scorrimento: -

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

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

}); 

Answer 6

È possibile utilizzare questo semplice plugin per aggiungere scrollUp e scrollDown al jQuery

https://github.com/phpust/JQueryScrollDetector

Answer 7

Solo per aggiungere altri comandi ts - varrebbe la pena di disabilitare lo scorrimento verso l'alto nella parte superiore della pagina. Se l'utente fa scorrere accidentalmente mentre già al top avrebbero dovuto scorrere verso il basso due volte per avviare

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