We Keep Coding

Fade out 'scroll to top' button when you're 100px off the bottom of the page

I'm using a simple jquery "scroll to top" plugin I found online and it's working well. However, I want to fade out my 'scroll to top' button when I'm 100px off the bottom of the page. Can anyone help? Here's a fiddle - https://jsfiddle.net/p1em9gph/
//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;
});
Scroll To Top

You need to amend the logic which compares scrollTop() to be the height of the document, minus the height of the window, minus the 100px distance. Try this:
//Check to see if the window is top if not then display button
$(window).scroll(function() {
if ($(this).scrollTop() > $(document).height() - $(window).height() - 100) {
$('.scrollToTop').fadeIn();
} else {
$('.scrollToTop').fadeOut();
}
});
Working example
Update
From your comments below it sounds like you only want the div to show when the scroll is 100px from either the top or bottom, in which case try this:
$(window).scroll(function() {
if ($(this).scrollTop() < 100 || $(this).scrollTop() > $(document).height() - $(window).height() - 100) {
$('.scrollToTop').fadeOut();
} else {
$('.scrollToTop').fadeIn();
}
});
Working example

Detect if page is scrolled on document load

I'm using the scrollTop to detect if the users scrolls then fadeIn an element:
$(document).ready(function() {
// scroll to top
$(window).scroll(function() {
if ($(this).scrollTop() >= 700) { // if page is scrolled more than 700px
$('#return-to-top').fadeIn(200);
} else {
$('#return-to-top').fadeOut(200);
}
});
});
It works well if the user loads the page and then scroll, but if the user is already below the 700px and reload or goes back to the same page the element doesn't fadeIn automatically on document load. It seems that it is not detecting the page is already scrolled.
Any idea what could be the problem with my code?

Just do the test when document is ready
It's better to create a function
function checkScroll(){
if ($(window).scrollTop() >= 700) {
$('#return-to-top').fadeIn(200);
} else {
$('#return-to-top').fadeOut(200);
}
}
$(document).ready(function() {
checkScroll();
$(window).scroll(checkScroll);
});

Call this way to your function
Put this line end of your document ready.
$(window).scroll();

Simply trigger scroll after the delegation.
$(document).ready(function() {
// scroll to top
$(window).scroll(function() {
if ($(this).scrollTop() >= 700) { // if page is scrolled more than 700px
$('#return-to-top').fadeIn(200);
} else {
$('#return-to-top').fadeOut(200);
}
}).scroll();
//^^^^^^ trigger scroll.
});

Animating ScrollTop for side navigation for single page anchors

I'm trying to animated a smooth transition between anchor point on a single page with a stationary navigation on the side that gets highlighted. I'm a complete novice so I don't know how to implement "( document.body ).animate" or what ever is necessary to do the transitions.
tl;dr:
smooth scroll to anchors instead of jumping to anchors
here is the js:
$('#firstlink').addClass('active');
$(window).scroll(function(){
$('.active').each(function(){
$(this).removeClass('active');
});
var scrollTop = $(window).scrollTop();
if($(window).scrollTop() + $(window).height() == $(document).height())
$('#fifthlink').addClass('active');
else if (scrollTop > $("#fifth").position().top)
$('#fifthlink').addClass('active');
else if (scrollTop > $("#fourth").position().top)
$('#fourthlink').addClass('active');
else if (scrollTop > $("#third").position().top)
$('#thirdlink').addClass('active');
else if (scrollTop > $("#second").position().top)
$('#secondlink').addClass('active');
else
$('#firstlink').addClass('active');
});
here is the complete jsfiddle: https://jsfiddle.net/e03u0kqe/

This was probably answered somewhere else but this should do it:
$('#sidenav a').on('click', function(e) {
e.preventDefault();
var target = $(this).attr('href');
var scrollTo = $(target).offset().top;
var duration = 1000;
$('body').animate({
scrollTop: scrollTo
}, duration);
});
Add it after your window scroll event.
https://jsfiddle.net/e03u0kqe/2/

This may be of use to you:
http://www.dwuser.com/education/content/quick-guide-adding-smooth-scrolling-to-your-webpages/
I use it in my own site, and it works pretty well.
Hope this is of use to you.

scrollTop() !== does not work

I would like to trigger an event with jQuery when the scroll bar is not at the top of the document. So far I can only get this to work when it's at the top of the document. "!==" does not seem to work.
$(document).ready(function() {
if($(window).scrollTop() === 0) {
alert("top!")
};
});

Try this:
$(document).ready(function() {
$(window).scroll(function() { /* or whatever element you want to attach to */
if($(window).scrollTop() === 0) {
alert("top!")
};
});
});
Of course, this will trigger every time you scroll to the top, which may not be what you want.

You need to use the .scroll() event
$(document).ready(function() {
$(window).scroll(function() {
if($(window).scrollTop() !== 0) {
alert("not top!")
};
});
});
http://jsfiddle.net/EX2q2/

load AJAX page when scrollbar is 200px far from bottom of the window where window size may vary

I have tried this condition so far.
'if ($(window).scrollTop() == $(document).height() - $(window).height())'
so can anybody help me to get the solutuion .???

$(window).on('scroll', function() {
if (($(this).scrollTop() + $(this).height()) - $(document).outerHeight(true) > (-200)) {...}
});
FIDDLE

Try this:
$(function () {
$(window).on('scroll', function () {
if ($(window).scrollTop() + $(window).height() >= $(document).height() - 200) {
//initate ajax here
}
});
});