We Keep Coding

Show button when scroll up [JS]

I would like to show the button when scroll up. My current script doing this but I have to scroll to the top, and then the button appears. Is there any possible to show the button just shortly after I scrolling up the page?
<script>
function showButton() {
var button = $('#my-button'), //button that scrolls user to top
view = $(window),
timeoutKey = -100;
$(document).on('scroll', function() {
if(timeoutKey) {
window.clearTimeout(timeoutKey);
}
timeoutKey = window.setTimeout(function(){
if (view.scrollTop() > 10) {
button.fadeOut();
}
else {
button.fadeIn();
}
}, 10);
});
}
$('#my-button').on('click', function(){
$('html, body').stop().animate({
scrollTop: 10
}, 10, 'linear');
return false;
});
//call function on document ready
$(function(){
showButton();
});
</script>

You should use offset().top instead of scrollTop()

Remove active class when user scroll the page

I'm trying to get the above effect. When I click on individual menu items, the active class changes correctly. However, I want to remove all active classes when I scroll the page. In summary, the active class only has to change when clicked, and delete when the user scroll the page
$(document).ready(function() {
$('li').click(function() {
var $href= $(this).find('a').attr("href");
var offset = $($href).offset().top;
$(window).off('scroll');
$('html, body').animate({
scrollTop: offset + 'px'
},500)
$('li').find('a').removeClass('active');
$(this).find('a').addClass('active')
return false;
})
$(window).scroll(function() {
$('li').find('a').removeClass('active');
})
})
https://jsfiddle.net/m7pL4y2p/5/

I ended up with this solution which is not optimal but it seems to work
$(document).ready(function() {
$('li').click(function() {
var $href= $(this).find('a').attr("href");
var offset = $($href).offset().top;
$(window).off('scroll');
$('html, body').animate({
scrollTop: offset + 'px'
},500).promise().then(function() {
// Animation complete
console.log('complete');
// Need a timeout because this handler is fired before scrollTop reach the final position
window.setTimeout(function() {
$(window).scroll(removeAllActiveClasses);
}, 100);
});
$('li').find('a').removeClass('active');
$(this).find('a').addClass('active')
return false;
});
function removeAllActiveClasses() {
$('li').find('a').removeClass('active');
}
$(window).scroll(removeAllActiveClasses);
});
here is the fiddle

Remove scroll and use wheel method.
I hope the below simplified code helps you.
$(document).ready(function() {
$('li a').click(function(event) {
var offset = $($(this).attr("href")).offset().top;
$('html, body').animate({
scrollTop: offset + 'px'
},500);
$('li a').removeClass('active');
$(this).addClass('active')
event.preventDefault();
});
$(window).on('wheel', function(event){
$('li a').removeClass('active');
});
});

Try changing "window" to "document" just as in:
$(document).scroll(function() {
$('li').find('a').removeClass('active');
})

try to change this
$(window).scroll(function() {
$('ul > li > a').removeClass('active');
})
to this you have to bind scroll
$(window).bind('mousewheel',function() {
$('.active').removeClass('active');
});

Well, so it requires another aprox. The fact is that "annimation" is an asynchronous function, so you need a flag (automScr) that tells the on window scroll program to delete the class or not.
So you put atomScr to true when pressing over menu item, and set to false when the scrolling animation is done.
Keep a look on the "console.logs" messages.
Hope this works!
$(document).ready(function() {
var automScr=false;
$('li').click(function() {
automScr=true;
var $href= $(this).find('a').attr("href");
var offset = $($href).offset().top;
$(window).off('scroll');
$('html, body').animate({
scrollTop: offset + 'px'
},500,null,function(){setTimeout(function(){automScr=false;},1)});
$('li').find('a').removeClass('active');
$(this).find('a').addClass('active')
return false;
})
$(document).scroll(function() {
if (!automScr){
console.log ("no automscr");
$('li').find('a').removeClass('active');
}else {
console.log ("automscr");
}
})
})

preventing from animating further on some event

I've got this code here:
$(document).ready(function()
{
$("#nav_items > p:first-child").click(function()
{
$('html,body').animate(
{
scrollTop: $('#main_div').offset().top
}, 500);
});
$("#nav_items > p:last-child").click(function()
{
$('html,body').animate(
{
scrollTop: $('#about_us').offset().top
}, 800);
});
});
On element(p) click it scrolls the document to a #main_div or #about_us element. How can I stop it from keep on scrolling if I for example start scrolling with my mouse wheel?

You can listen to the mousewheel event and use the stop method:
$(window).on('mousewheel', function() {
$('body, html').stop();
});

Here is a method, combining the use of $(window).scroll() and $('body').on('mousewheel'), that will demonstrate how to do what you wish:
jsFiddle Demo
var scrollPause = 0;
menuItems.click(function(e){
var href = $(this).attr("href"),
offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
scrollPause = 1;
$('html, body').stop().animate({
scrollTop: offsetTop
}, 300, function(){
setTimeout(function(){
scrollPause = 0;
},5000);
});
e.preventDefault();
});
$('body').on({
'mousewheel': function(e) {
if (scrollPause == 0) return;
e.preventDefault();
e.stopPropagation();
}
})
Notes:
In the jsFiddle, the sp div is used to visually show status of the scrollPause variable
Upon clicking a top menu item, the scrollPause is set to 0 (disallow scroll) and a setTimeout is used to re-enable it after an 8-second pause. Therefore, immediately after the scroll-to-element, mouse wheel scroll will be disabled for 8 seconds.

Scroll through a sequence of divs — Jquery

I'm trying to get the window to scroll through a sequence of divs. Here is my code, but it is quite targeted, and won't work for more than one div.
$('.down_arrow').click(function(e){
$('html, body')
.animate({scrollTop:$('.two')
.offset()
.top }, 'slow');
});
JSFIDDLE
Is there a way I can then go through each $('.container') on each $('.arrow_down') click?

$('.down_arrow').click(function(e){
$('html, body')
.animate(
{
scrollTop:$(this).closest('.container').next().offset().top
}, 'slow');
});
jsFiddle

$('.down_arrow').click(function(e) {
var next_container = $(this).parents(".container").next(".container");
$('html, body')
.animate({ scrollTop:next_container.offset().top }, 'slow');
});
JSFiddle

You should save the last scrolled container, and scroll to the next one.
Something like this:
var currentContainerIndex = 0;
$('.down_arrow').click(function(e){
var currentContainer = $($('.container')[currentContainerIndex]);
if (!currentContainer.size()) {
currentContainerIndex = 0;
currentContainer = $($('.container')[currentContainerIndex]);
}
$('html, body').animate({scrollTop:currentContainer.offset().top }, 'slow');
currentContainerIndex++;
});

JQuery stop element from fading back in

I've made this little snippet to scroll the window to the top of the page.
$(window).scroll(function(){
$("#scrollup").fadeIn("slow");
});
$("#scrollup").click(function(){
$('html, body').animate({ scrollTop: 0 }, 'normal', function() {
$("#scrollup").fadeOut("slow");
});
});
However, when the scrollup div fades out after the window scrolls, it fades back in. How do I stop this from happening? Thanks.
I think I have found a reasonable solution
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
Would this be easier than changing my original code?

Check out .stop(): http://api.jquery.com/stop/
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollup').stop().fadeIn();
} else {
$('.scrollup').stop().fadeOut();
}
});

You should make sure that the scrollup div isn't faded in when you are at the top or when it is already faded in ( visible )
$(window).scroll(function(){
if ( $(window).scrollTop() !== 0 or $("#scrollup").is(":hidden") ) then {
$("#scrollup").fadeIn("slow");
}
});

You could just add an if statement to check if it is at the top:
$(window).scroll(function(){
if($("body").scrollTop()!=0)
$("#scrollup").fadeIn("slow");
});
$("#scrollup").click(function(){
$('html, body').animate({ scrollTop: 0 }, 'normal', function() {
$("#scrollup").fadeOut("slow");
});
});​