We Keep Coding

How to link page scroll to a div element scroll? Or how to scroll div element using page scroll?

So I have an issue with scrolling the page and some div with content inside it.
There is a .container at the bottom of the page and footer goes after it.
When an user gets to the bottom of the page there should be possibility to continue scrolling the page but exactly the .scrollable container should be scrolled.
By default we can scroll .scrollable div's content if mouse cursor is over it. But I need to somehow link common page scroll to this .scrollable div's scroll.
How does this problem can be solved?
Here the JSFiddle link to make the issue more clear

$(window).on('mousewheel', function(e) {
//scrolling bottom
if(e.originalEvent.wheelDelta /120 <= 0) {
//checks if we reached bottom
if($(this).scrollTop() + $(this).height() == $(document).height()) {
$('.scrollable').scrollTop($('.scrollable').scrollTop() + 10);
}
}
});
EDIT: After lots of digging I've managed to build a script for exactly what you need
NOTE: The event is currently bound on mousewheel but there are more types of scrolling such as: dragging, clicking, arrow keys and I'm not aware of function to cover them all and do the thing you want in the same time.
I forked your Fiddle

How to check if the element is near the bottom of the screen?

How is the way to check if some the element is near the bottom of the screen let say 100px from the bottom? (not the bottom of page).
The thing is i wanted that when this element is clicked, an another element will shown up and will slide to top rather to down if is near the bottom of the screen?

You can identify when an element is under 100px from the bottom of the screen with the following condition (without the need to use jQuery):
if (window.innerHeight - element.getBoundingClientRect().bottom < 100){
// the desired place
}

I think what you want is a button that displays when the user is almost at the bottom of your screen and when the user clicks on it, it scrolls them back to the top of the screen.
You may want to use JavaScript to achieve this.
Using the jQuery library
<script type="text/javascript>
$(document).scroll(function(){
var x = $(this).scrollTop();
if (x > 250) //The 250 is the total height of div that the user scrolls to before the button displys for the user to click
{
$('.button').fadeIn();
} else {
$('.button').fadeOut();
}
$('.button').click(function() {
$('html, body').animate({
scrollTop: $('.topmost_div').offset().top}, 'slow'); //tell the page to scroll back to the div at the top of the page.
});
});
</script>
Hope this helps

Make browser scroll down smoothly after certain point

I have a slider in the top section of the site. When user scrolls past a certain point–say 50px from top of page, I would like force the page to scroll to another point. So essentially, how can I recreate this effect – http://www.returntohope.com/stories#intro

you can start from here
$(document).ready(function(){
$(window).on('scroll',function(){
if($(this).scrollTop() > 50){
$('html,body').animate({scrollTop : $('#next_div').offset().top});
}
});
});
DEMO

Making an image appear after scrolling past header - attempts not working?

I've recently taken over work on a friend's website, here. I want to get the small logo above the description box to only show up once the user has scrolled past (and subsequently hidden) the large header at top, and disappear again if the user scrolls back up past it. I've tried the methods recommended in these other posts here and here, which seem like the same basic idea but I can't get any of them to work.
I'm new to anything and everything scripting (which I'm entirely sure is the biggest problem here, I know.) So any help is appreciated as what I'm apparently doing wrong.

Start by giving the <div class="fixeddiv"> a style="display: none". Then add the following (since you're already using jQuery):
$(document).ready(function () {
var contentOffset = getOffset();
function getOffset() {
var allOffsets = $("div#content").offset();
return allOffsets.top;
}
$(window).resize(function () {
contentOffset = getOffset();
});
$(window).scroll(function () {
var windowTop = $(window).scrollTop();
if (windowTop > contentOffset) {
$("div.fixeddiv").show();
} else {
$("div.fixeddiv").hide();
}
});
});
Here's what this code does. When the document is done loading, it gets the number of pixels that the "content" div is from the top of the document (offset). It does this again any time the window is resized. Then, when someone scrolls up or down, it gets the number of pixels that are already hidden above the scroll (scrollTop). If the number of hidden pixels is greater than the offset of the #content div from the top of the window, that means we've scrolled past the top of the content div and should show the icon. Otherwise, we should hide the icon.

How to fadeIn to fadeOut elements while scrolling?

I have more than 70 divs on my page.
I don't want to show all the divs at once until user scrolls page.
I am trying to hide overflown elements on my page, while user scrolls the page , hidden divs should be fading in again.
But i am not able to hide overflown elements and not finding any way to fadeIn overflown elements again if window is scrolled.
However i gave it a try-
$(function(){
$(window).css("overflow","hidden");
var lengthy= $('.content').length;
alert(lengthy);
var scrollbottom= $(window).scrollTop()+$(window).height();
$(window).scroll(function(){
$(document).css("overflow","hidden");
if($(window).height() >scrollbottom)
{
$(document).fadeIn();
}
});
});
Jsfiddle
How can this be done?

EDIT your Jquery to somthing like this
$(window).scroll(function () {
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
//Add something at the end of the page
}
});
What this does is the scroll happens when it's reaches 10px before end of page and not necessary the very end of the page. It's not necessary to have it, but it gives greater control to define at what point page should scroll...
This Example will show you what i think you want
http://www.webresourcesdepot.com/dnspinger/