Develop Reference

Jquery scroll to a div after click a button then hide the button after scroll

I wanted to hide a button when window scroll to a div and show again when scroll out from this div. I also wanted after click on this button this window will scroll to the div and hide the div. But problem is after click on the button and scroll to the div the button not hiddeing. here is my code
$(document).ready(function() {
$(window).scroll(function() {
var scroll_top = $("#right-side-bar").offset().top;
if ($(window).scrollTop() < scroll_top ) {
$(".timestsw-apply-stic").addClass('apply-sticky-btn');
} else {
$(".timestsw-apply-stic").removeClass('apply-sticky-btn');
}
});
$('a#stick').on('click',function (e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $("#right-side-bar").offset().top
}, 500,function () {
$(".timestsw-apply-stic").removeClass('apply-sticky-btn');
});
})
});
please help me how can i solve this. thanks

scroll-to-top button on a mobile website

I'm trying to make the Scroll To Top button appear once the user started scrolling down, instead of it always being present, even when being at the top. Quick note, I barely have experience with JS, so I have no idea what I'm doing.
Anyway here is the page I'm having an error on: http://www.m.evans-carpentry.com/gallery/projects/
<script>
$(function() {
var $elem = $('#content');
$('#nav_up').fadeIn('slow');
$('#nav_down').fadeIn('slow');
$(window).bind('scrollstart', function(){
$('#nav_up,#nav_down').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#nav_up,#nav_down').stop().animate({'opacity':'1'});
});
$('#nav_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
}
);
$('#nav_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
}
);
});
</script>
Thanks!

you call jquery earlier announcements of jquery on line 30
<script>$('#nav Li: has (ul)').doubleTapToGo ();</script>
insert this line after the call jquery

Your code is too complex, try this:
$(document).ready(function(){
//Check to see if the window is top if not then display button
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollToTop').fadeIn();
} else {
$('.scrollToTop').fadeOut();
}
});
//Click event to scroll to top
$('.scrollToTop').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
});
".scrollToTop" is the thing to be clicked that scrolls back to the top of the page.

scrolling down when using JQuery slidetoggle()

I have 2 footer (footer-larg) & (footer-bottom) i need when i click a link in footer-bottom (flip) .. footer-larg toggle && scroll down to footer-bottom
until now footer-larg toggle but not scroll down
$("#flip").click(function() {
$("#footer-large").slideToggle("slow");
if ($("#footer-large").is(':visible')) {
$("html, body").animate({scrollTop: $("#footer-large").offset().top});
}
});

Why not let the browser handle the scroll?
Try this:
$("#flip").click(function() {
$("#footer-large").slideToggle("slow");
if ($("#footer-large").is(':visible')) {
window.location = '#footer-large';
}
});

give element class when scrolling

I would like to give an element a .class when user scrolls a page. And then take it away (.class) when user stops scrolling.
Simply speaking, I want to give font awesome icon class fa-spin only when page is being scrolled, and when scrolling stops, icon stops spinning.
Would be nice to know how to just generally apply css animation when scrolling.
Thanks

You can use https://github.com/ssorallen/jquery-scrollstop
var $el = $('.element');
$(window).on("scrollstart", function() {
$el.addClass('scrolling')
})
$(window).on("scrollstop", function() {
$el.removeClass('scrolling')
})

You can use addClass and removeClass on scroll event as follow.
This will add class when scrolling and remove it after delay of 100 milliseconds.
$(window).scroll(function() {
$('div').addClass('myClass');
setTimeout(function() {
$('div').removeClass('myClass');
}, 100);
});
DEMO

You can use like this:
$(window).scroll(function() {
$('div').addClass('blue');//add class on scroll
clearTimeout($.data(this, 'scrollTimer'));
$.data(this, 'scrollTimer', setTimeout(function() {
$('div').removeClass('blue');//remove class on scrolling stops
}, 250));
});
demo

To add e.g. fadeIn animation on scroll you can do as following:
$(window).scroll(function () {
$('#second').delay(1000).fadeIn('slow');
(delay is optional)
Check example: jsfiddle.net

Disable scrolling of a window in jQuery

I am using something like facebox, and want the main window scrolling bar to be disabled.
One catch though, There is a scroll bar inside the facebox component, which needs to be able to scroll.
What I am trying to fix is the following case:
when scrolling the internal scrolling element (inside facebox), when scroll ends, it scrolls the page down further.

do it in css:
body {
overflow: hidden;
}
this would hide the scrollbar in the main window

i went into the facebox.js file and added
$('body').css('overflow', 'hidden');
to
loading: function() {
init()
if ($('#facebox .loading').length == 1) return true
showOverlay()
$('#facebox .content').empty()
$('body').css('overflow', 'hidden');
$('#facebox .body').children().hide().end().
append('<div class="loading"><img src="'+$.facebox.settings.loadingImage+'"/></div>')
and added $('body').css('overflow', ''); to the end of the document
* Bindings
*/
$(document).bind('close.facebox', function() {
$(document).unbind('keydown.facebox')
$('#facebox').fadeOut(function() {
$('#facebox .content').removeClass().addClass('content')
$('#facebox .loading').remove()
$(document).trigger('afterClose.facebox')
$('body').css('overflow', '');
})
hideOverlay()
})
})(jQuery);
This stops the scroll when open and when closed put the scroll back in, it worked for me at http://www.vestedutility.com.au/home_electrical_saftey_check.php