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");
}
})
})

set time interval for each div

Here is my Code: Demo
The demo is working fine on manual scrolling for each div to scrolltop.
What I need is: If I click the Auto Start button I want to Auto scroll 1, Auto scroll 2, ... Auto scroll n each div to scrolltop.
$(".jumper").on("click", function() {
var links = $(this).attr('href');
var type = links.substring(links.indexOf('#')+1);
$("body, html").animate({
scrollTop: $('#'+type).offset().top
}, 1500);
});
Each div should reach scrolltop and stop, then go to next div scrolltop with same time interval.

This is how I did it:
$(".autostart").on("click", function() {
scrollToElem($("#auto-scroll"));
var scrollList = $("#auto-scroll").nextAll();
var current = 0;
time = setInterval(function() {
scrollToElem($(scrollList.get(current)));
current++;
if (scrollList.length == current) {
clearInterval(time);
}
}, 2000);
});
Here is the JSFiddle demo

You have error in your code. .top of undefined. You can use links as selector as it contains both idselector + id :
$(".jumper").on("click", function() {
var links = $(this).attr('href');
$("body, html").animate({
scrollTop: $(links).offset().top
}, 1500);
});

jQuery: Anchor scrolling jumpy

I am using some code from www.css-tricks.com that can be used to animate local scrolling to a page anchor. Here is the code snippet:
$("class-name-here").on("click", function() {
var $target = $(this.hash);
$target = $target.length && $target
|| $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body')
.animate({scrollTop: targetOffset}, 1500, "easeOutQuint");
return false;
}
});
I have tried using a variety of times for the animation duration, but when I click the link, the page does scroll correctly, but after the scroll reaches the destination, the animation continues. In other words, it scrolls, but after the animation seems complete, if you try to scroll away manually, the page animates itself to that location again for about half a second.
Is there something wrong with the snippet / has anyone seen this before?

I found an example where we stop the scroll-event on different kind of events. I made an example for you without using jquery-ui. The scroll-timer is set to 2.5 sec so that you can stop it anytime before it reaches its target: JS-FIDDLE
function goTo(sectionID) {
var page = $("html, body");
page.on("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove", function(){
page.stop();
});
page.animate({ scrollTop: $("#section" + sectionID).offset().top }, 2500, 'swing', function(){
page.off("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove");
});
return false;
};

Can you try this :
$('.your-class-name-here').click(function(event) {
var id = $(this).attr("href");
var offset = 10;
var target = $(id).offset().top - offset;
$('html, body').animate({scrollTop:target}, 1000);
event.preventDefault();
});
});

Click few times on button makes the page is blocked

When You click on button, page should scroll down, to div with id="myTarget".
here is my HTML:
<button class="go"> GO </button>
<div id="myTarget">
<p>
la lalal lalala lalala
</p>
</div>
and jquery:
$(function() {
$(".go").on('click', function(event) {
event.stopPropagation();
$('html, body').animate({
scrollTop: $("#myTarget").offset().top }, 3000);
});
});
My problem is that when you click a few times on button, page scroll down. After that you can't scroll up. Is any way to stop click event while page moving?
JsFiddle

And if you stop the animation when user mousewheel?
$(function() {
$(".go").on('click', function(event) {
event.stopPropagation();
$('html, body').animate({
scrollTop: $("#myTarget").offset().top }, 3000);
});
});
var page = $("html, body");
page.on("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove", function(){
page.stop();
});
Demo

What about disabling the button while it is running and enabling it again once animation is done?
$(function() {
$(".go").on('click', function(event) {
var $but = jQuery(this);
event.stopPropagation();
$but.attr("disabled", true);
$('html, body').animate({
scrollTop: $("#myTarget").offset().top }, 3000, "linear", function(){
$but.removeAttr("disabled");
});
});
});

I assume you mean that if you rapidly click the button a couple of times it'll scroll down and not let you scroll back up, and not that it doesn't work when you "Click Button, Scroll Down, wait, Scroll Up".
If it's the first case, you can fix it like this.
$(function() { $(".go").on('click', function(event) {
event.stopPropagation();
$(".go").attr("disabled", true).delay(3000).attr("disabled", false); $('html, body').animate({
scrollTop: $("#myTarget").offset().top
},
3000);
});
});
This means that when you click on the button, it will be disabled for 3000 milliseconds (the time of your animation. This should stop a user from being able to click on it and trigger the animation more than once while it's animating.

The issue is that your animation is getting appended onto the previous animation for the html and body tags. Thus, you have to wait for all of the animations that have been started to die before you can scroll back up.
Things that you can do about this problem
Make the duration of the animation smaller
Call stop() on the elements you are animating before creating the new animation
Call stop() if the window is scrolled. This solution could be problematic if you ever have the body tag doing other animations. The first two solutions should be enough, anyway.
The first should be self explanatory and the second is very easy:
$(".go").on('click', function(event) {
event.stopPropagation();
$('body').stop().animate({
scrollTop: $("#myTarget").offset().top }, 500);
});
You also only need to animate the body element (not the html element).
JSFiddle Example

Use a scrolling state, like so :
$(function() {
//global var
isScrolling = false;
$(".go").on('click', function(event) {
event.stopPropagation();
if(!isScrolling) {
isScrolling = true;
$('html, body').animate({
scrollTop: $("#myTarget").offset().top }, 3000,
//Only when it's completed (callback)
function() {
isScrolling = false;
}
);
}
});
});
Your problem is that it keeps trying to scroll down even though you are already down.