We Keep Coding

JQuery: scrollTop() exactly

Want to recognize if the user scrolls up or down with this snippet
$('#songs-ul').bind('mousewheel', function(e){
if(scrolling != 1){
alert($("#songs-ul").scrollTop());
if($("#songs-ul").scrollTop() > scrollheight){_runter();}
if($("#songs-ul").scrollTop() < scrollheight){_rauf();}
//scrollheight = $("#songs-ul").scrollTop();
}
});
But if the user scrolls "one time", it is no change - just at a second scroll it changes.
For a preview: http://www.limesoft-solutions.com/jukebox/index.php?list=1&yt=1
(it's the song list under the search field with "Suchen" text)
Has anybody a tip for it? :)
Thanks!

You can use something like this to determine if the user is scrolling up or down:
(function () {
var previousScroll = 0;
$('#songs-ul').scroll(function () {
var currentScroll = $(this).scrollTop();
if (currentScroll > previousScroll){
alert('Im scrolling down');
//add your code here
}
else {
alert('Im scrollign up');
//add your code here
}
previousScroll = currentScroll;
});
}());
Here is an Example Fiddle

Javascript & jquery return value

I've been staring at the following problem for 3 hours now. I would like to start the whole code from the beginning after finishing the 'newLevel'-function at the bottom of the code. I've been trying to wrap the code inside of if() and while() statements but just can't get it to work.
Shortly the problem is that newLevel()-function can't send the new value of variable level to the beginning of the code. How could I do this?
Thank you for the downvotes!
$(document).ready(function(){
var level = 1;
if(level == 1)
{random variables}
if(level == 2)
{random variables}
if(level == 3)
{random variables}
$('#check').click(function(){ // if we click 'Check correct answer button
if(givenAnswer == correctAnswer)
{
$('#raisingCrystals').animate({
'marginTop' : "-=51%",
'opacity' : '0.0'
},2000, function(){
$('#crystalsH3 > h3').html('+3');
$('#crystalsH3 > h3').css('color','#0D5C94');
$('#crystalsH3').animate({
'font-size' : "10vw"
},2000, function(){
$('#totalPoint > h3').html(totalPoints);
$('#speak4 > p').css('font-size','1.7vw');
$('#speak4 > p').html('Blaa blaa...');
$('#check > h2').html('---Next assesment---');
// let's do a function that check, if the '---Next assesment---'-button is clicked
$('#check > h2').click(function newLevel(){
level++;
});
});
});
});
}
else
{
}
});
});

Replace the part of your code with this:
$('#check > h2').click(function () {
level++;
});

Smooth scrolling of document in either directions

I used the following function to scroll my document to specific point when user tries to scroll on the page. For this I used following code:
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$("html, body").animate({scrollTop: 700}, 500);
return false;
}
});
I want to know if there are event listeners for the mousewheel actions or not. When using this I can not actually scroll back up to the top of the document, because the scroll of mouse re-invokes the function and it pulls down the document again.
Also, if there is an alternative way, please let me know.
Can I do this using CSS only for cases where JS may be disabled by the user/client?

EDIT:
After your short explanation I (hopefully) understand what do you want.
I made a function with position states:
header, content, unresolved
and I reused your scrolling function with state condition.
(function() {
var pagePosition = "header";
$(window).scroll(function(){
if ($(this).scrollTop() > 0 && pagePosition == "header") {
pagePosition = "unresolved";
$("html, body").animate({scrollTop: 700}, 500, function() {
pagePosition = "content";
});
return false;
} else if ($(this).scrollTop() < 700 && pagePosition == "content") {
pagePosition = "unresolved";
$("html, body").animate({scrollTop: 0}, 500, function() {
pagePosition = "header";
});
return false;
}
});
})();

jQuery to top function disallows scrolling

I'm creating magento shop and i want to make toTop button available after user scrolls the window.
I paste mine code bellow, it works fine, but after window is on top, i can't move it anymore, it's stuck.
jQuery(window).scroll(function() {
var top = jQuery(window).scrollTop();
if (top > 77) {
jQuery(function() {
jQuery('img.arrowup').fadeIn();
jQuery('div.header_bg').show();
jQuery('div.mainmenu').addClass('stick');
jQuery('body div.header-container').next().addClass('pad');
jQuery("img.arrowup").on('click', function(e) {
e.preventDefault();
jQuery('body,html').animate({scrollTop:10},800);
});
})} else {
jQuery('div.header_bg').hide();
jQuery('img.arrowup').fadeOut();
jQuery('body div.header-container').next().removeClass('pad');
jQuery('div.mainmenu').removeClass('stick');
}
});
============================
Thanks everybody for help, here's working solution with stick header and toTop animation :)
var scrollDiv=jQuery(this);
jQuery(window).scroll(function(){
if(jQuery(window).scrollTop()<="77"){
jQuery("img.arrowup").fadeOut("slow");
jQuery('div.header_bg').hide();
jQuery('div.mainmenu').removeClass('stick');
} else {
jQuery("img.arrowup").fadeIn("slow");
jQuery('div.header_bg').show();
jQuery('div.mainmenu').addClass('stick');
}
});
jQuery("img.arrowup").click(function(){
jQuery("html, body").animate({scrollTop:0},"slow");
});

I suggest to read this answer first for understanding why animations creates conflict depends on scroll value, than give it a try to this:
$(document).ready(function() {
$(window).scroll(function() {
var scrollVal = $(this).scrollTop(); // use this instead of window
if ( scrollVal >= 0 && scrollVal < 77 ) {
//do something without animations
$('div.header_bg').hide();
$('div.mainmenu').removeClass('stick');
} else if ( scrollVal === 77 ){
//i didn't try this before but it may work,
//since value equals 77 once, it may not create animation conflicts
$('img.arrowup').fadeIn();
} else if ( scrollVal > 77 ) {
//do something without animations
$('div.header_bg').show();
$('div.mainmenu').addClass('stick');
}
});
});

Scrolling to the bottom of a page and unlimited scrolling

I'm trying to make a web page that works with unlimited scrolling. Now the problem is, it doesn't seem to work right now:
window.scroll(function() {
alert('Scrolling');
if ($(this)[0].scrollHeight - $(this).scrollTop() == $(this).outerHeight()) {
alert('Reached the bottom');
}
});
I'm really new to jquery, even though it's essentially javascript(right?) anyways, what am I doing wrong? I have also tried document.scroll and document.body.scroll

Try this:
if ($(this).scrollTop() == $(document).height() - $(window).height()) {
alert('Reached the bottom');
}
I jsfiddle'd it and it works: http://jsfiddle.net/wcKVK/1/

You have at least one error there. Try:
$(window).scroll(function() {
alert('Scrolling');
if ($(this)[0].scrollHeight - $(this).scrollTop() == $(this).outerHeight()) {
alert('Reached the bottom');
}
});

I think this is what you're trying to achieve:
$(window).scroll(function() {
if ($('body').scrollTop() + $(window).height() == $('body').outerHeight()) {
alert('Reached the bottom');
}
});

(function ($) {
$(window).scroll(function () {
if ($(this).scrollTop() == $(document).height() - $(window).height()) {
alert('bottom');
}
});
}(jQuery));
is what works for me.