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.

fadeOut on scroll at pixel height

i'm trying to achieve a Scroll to Top button that fades in at a certain point on the page and fades out at a certain point...I have the fadeIn function working properly but can't seem to get the proper syntax for the click event fadeOut; it just disappears once you get to the top, instead of fading out if you're <= 675px. Any help is greatly appreciated!
HTML:
</div>
BACK TO LOGIN
</div>
jQuery:
$(document).ready(function() {
//Check to see if the window is top if not then display button
$(window).scroll(function() {
if ($(this).scrollTop() > 675) {
$('.scrollToTop').fadeIn(500);
} else {
$('.scrollToTop').fadeOut(500);
}
});
//Click event to scroll to top
$('.scrollToTop').click(function() {
$('html, body').animate({
scrollTop : 0
}, 800);
return false;
});
});

I think your question isn't so clear but maybe you mean that when click on the scrollToTop button it doesn't disappear until the scroll reach to top of page, it's because when your animation function is running the .scroll can't runs so fast that disappear button when reach to 675px but you can fadeout button as soon as click on it using this code:
jQuery: $(document).ready(function() {
var isClicked = false;
$('.scrollToTop').css("display","none");
$(window).scroll(function() {
if (isClicked == false){
if ($(this).scrollTop() > 675) {
$('.scrollToTop').fadeIn(500);
} else {
$('.scrollToTop').fadeOut(500);
}
}
});
$('.scrollToTop').click(function() {
isClicked = true;
$('.scrollToTop').fadeOut(500);
$('html, body').animate({
scrollTop : 0
}, 800, function(){
isClicked = false;
});
});
});
The isClicked variable is added to prevent blinking button (you can remove it to figure out what i'm saying).
Also i add this line:
$('.scrollToTop').css("display","none");
because it seems that you don't need a "Scroll To Top" button when page load for first time and you are on the top of page.
Check JSFiddle Demo

backtotop.js bug: box is always visible in Firefox 29

// JavaScript Document
$(document).ready(function(){
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
This should hide the box until you have scrolled to about 100px from the top. It does work in every browser until the latest Firefox update came out. Any suggestions why that is?
Check the box on the lower left corner on this site: http://lightningsoul.com

Problem had nothing to do with FF29 but with the implementation of the JavaScript.
I had to add a leading / in order to implement it for pages like http://lightningsoul.com/media/vid/1934 etc.