We Keep Coding

How can I control the mouse scroll event and after that do an animation on the html, body?

I'm facing a very strange error, which is animation on body during mouse scroll. I think its happening because of the jQuery event window.scroll. I have tried a lot of things like unbinding of animation on mouse scroll, but nothing works. Below is my code.
$(document).on("scroll", function () {
var lastScrollTop = 0;
var windowHeight = $(window).scrollTop();
var seccion1 = $("#seccion1").height();
var seccion2 = $("#seccion2").offset().top;
var alturaseccion2 = $("#seccion2").height();
//this function returns in which section is the user with the scroll
var localizacion = comprobarSeccion(seccion1, seccion2);
if (windowHeight > lastScrollTop) {
// down scroll
console.log("scrollabajo");
if (localizacion == 1) {
$("html, body").animate({
scrollTop: $("#seccion2").offset().top
}, 2);
$(document).bind("scroll");
} else if (localizacion == 2) {
if (windowHeight >= ((alturaseccion2 * 0.80) + seccion2) && windowHeight <= (alturaseccion2 + seccion2)) {
} else {
}
}
} else {
// up scroll
console.log("scrollarriba");
}
lastScrollTop = windowHeight;
});
´´´

I'm not sure what you are trying to accomplish, but if your trying to trigger an event with a specific scroll value you can use the code below
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
alert("scroll is greater than 500 px)
} else if(scroll==500){
alert("scroll has hit 500px");
}
});

On scroll the active menu does not chaning

I've created a right side menu but when i scrolling down it is not changing the active class to next menu,I've used this code lots of time but this time i'm not getting the result,
$(window).scroll(function() {
var scrollbarLocation = $(this).scrollTop();
scrollLink.each(function() {
var sectionOffset = $(this.hash).offset().top - 70;
if ( sectionOffset <= scrollbarLocation ) {
$('.icons').removeClass('iconactive');
$(this).children('.icons').addClass('iconactive');
}
});
});
DEMO

you need to define scrollLink and you can give some animation effect when you click an anchor link by adding a function like this
$(document).on('click', 'a[href^="#"]', function (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 1000);
});
Demo : http://jsfiddle.net/3xmop98u/

I think you are missing var scrollLink = $('.myanimate'); in your code. Adding this line in your DEMO make the code work.
$(window).scroll(function() {
var scrollbarLocation = $(this).scrollTop();
var scrollLink = $('.myanimate');
scrollLink.each(function() {
var sectionOffset = $(this.hash).offset().top - 70;
if ( sectionOffset <= scrollbarLocation ) {
$('.icons').removeClass('iconactive');
$(this).children('.icons').addClass('iconactive');
}
});
});
$(".myanimate").click(function (){
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top
}, 2000);
});

Back to top scroll jquery is not working in chrome. Why. Its works fine in firefox

http://jsfiddle.net/gilbitron/Lt2wH/
it work when i open in chrom browser. but not in my project. am using bootstrap css and js file.
if ($('#back-to-top').length) {
var scrollTrigger = 100, // px
backToTop = function () {
var scrollTop = $(window).scrollTop();
if (scrollTop > scrollTrigger) {
$('#back-to-top').addClass('show');
} else {
$('#back-to-top').removeClass('show');
}
};
backToTop();
$(window).on('scroll', function () {
backToTop();
});
$('#back-to-top').on('click', function (e) {
e.preventDefault();
$('html,body').animate({
scrollTop: 0
}, 700);
});
}
Some have answer it in the link Scroll to top button not working in chrome or safari. but not works for me.
Thanks in advance.

You should place your js inside the $(document).ready() function. Like this:
$( document ).ready(function() {
if ($('#back-to-top').length) {
var scrollTrigger = 100, // px
backToTop = function () {
var scrollTop = $(window).scrollTop();
if (scrollTop > scrollTrigger) {
$('#back-to-top').addClass('show');
} else {
$('#back-to-top').removeClass('show');
}
};
backToTop();
$(window).on('scroll', function () {
backToTop();
});
$('#back-to-top').on('click', function (e) {
e.preventDefault();
$('html,body').animate({
scrollTop: 0
}, 700);
});
}
});

Javascript Sticky nav scrollTo

so I got this sticky header that works great the only problem I have is when I press a link and the screen scrolls down it overlaps my content so I need to set a -47px height or something like that so the # it scrolls to get below the menu and not under it.
My code
$(document).ready(function() {
var stickyNavTop = $('.header').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('.header').addClass('sticky');
} else {
$('.header').addClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
$(document).ready(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(closenav).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 760 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
Sorry if i'm not clear enough and need to explain it in another way.
Please keep in mind I'm a JS rookie!
Thank you!

var $root = $('html, body');
$('a').click(function() {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top -47
}, 500, function () {
window.location.hash = href;
});
return false;
});
add this within your $(document).ready(function(){});

Scroll to Top jQuery

I am trying to create a super simple Scroll to top button.
It works but it's appending the button to the body every time when i scroll.
I would like to append it only once and fade it in and if you click it you will be scrolled back to the top off the page and it will fadeout.
The functionality is working but its appending it to the page in an loop.
I know it's a simple bug but, I can't figure it out.
My code:
$(window).scroll(function () {
var scrollPosition = $(this).scrollTop();
var to_top = '<a class="back-to-top" href="#"></a>';
if (scrollPosition >= 500) {
$("body").append(to_top);
$('.back-to-top').fadeIn(1600);
} else {
$('.back-to-top').fadeOut(800);
}
$( ".back-to-top" ).on( "click", function(event) {
event.preventDefault();
$("html, body").animate({ scrollTop: 0 }, "slow");
});
});

Well, you're telling it to append the every time the scroll event is fired, so check if it exists first, see if it works out for you.
$(window).scroll(function () {
var scrollPosition = $(this).scrollTop();
var toTops = $('.back-to-top'); // get jQ object once
if (scrollPosition >= 500) {
if (!toTops.length){ // if no elems
// create one
var $to_top = $('<a class="back-to-top" href="#"></a>');
$to_top.on( "click", function(event) {
event.preventDefault();
$("html, body").animate({ scrollTop: 0 }, "slow");
});
// then attach it
$("body").append($to_top);
} else {
// if elems exist, fade them in
toTops.fadeIn(1600);
}
} else {
toTops.fadeOut(800);
}
});

You should create button once and then hide/show it.
jQuery(function($) {
var to_top = $('<a class="back-to-top" href="#"></a>'),
visible = false;
to_top.appendTo('body').hide();
$( ".back-to-top" ).on( "click", function(event) {
event.preventDefault();
$("html, body").animate({ scrollTop: 0 }, "slow");
});
$(window).scroll(function () {
if ($(this).scrollTop() >= 500)
if(!visible){
to_top.stop(true,false).fadeIn(1600);
visible = true;
}
else
if(visible){
to_top.stop(true,false).fadeOut(800);
visible = false;
}
});
});