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

Making a div scroll with the page after a certain distance

I have a web page set up with 225px of header space and then the body begins. I have a floating div that I want to follow with the body as the page gets scrolled down. The div follows but I dont want it to start until the user has scrolled past the header. Here is a picture example:
Once the user has scrolled past all the red (225px), then the blue div should being scrolling with the page.
The current problem is that the div begins moving the second the user scrolls through the header and ends up 225px below the top of the page.
I believe something like this is what I need, but it doesn't seem to do anything (at least in chrome)
if($(window).scrollTop() > 255)
{
//begin to scroll
$("#floating_list").css("position","fixed");
$("#floating_list").css("top",0);
}
else
{
//lock it back into place
$("#floating_list").css("position","relative");
}
Thanks!

You haven't set any event listener. Include JQuery and here's the working code:
$(document).on("scroll", function(){
// or as a shorthand $(document).scroll(function(){
if($(document).scrollTop() > 255)
{
//begin to scroll
$("#floating_list").css("position","fixed");
$("#floating_list").css("top",0);
}
else
{
//lock it back into place
$("#floating_list").css("position","relative");
}
});

Show and hide a Div on scroll up and down

I'm trying to make my simple "scroll back to the top" image appear and disappear based on how far away from the top of the page you are. For the sake of example, let's say 100 pixels away from the top.
Here's what I have. It seems to work on scroll down, the image div fades in.
When I scroll back to the top, the div doesn't fadeOut. Any tips?
$(window).scroll(function() {
if ($(this).scrollTop()>100)
{
$('#toTop').fadeIn();
}
else
{
$('.#toTop').fadeOut();
}
});

I think you've a typo in your code: $('.#toTop').fadeOut(); should be $('#toTop').fadeOut();
Update
Just a simple improvement. To prevent the element be faded all the time you scroll, check if it was already faded earlier:
var $toTop = $('#toTop');
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$toTop.fadeIn();
} else if ($toTop.is(':visible')) {
$toTop.fadeOut();
}
});

Div that appears on Scroll but not on page load

I'm making this web page and I want a div to appear only on scrolling down 300px from the top of the page. This is the JavaScript i borrowed from the net:
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
var y = $(window).scrollTop();
if(y > 300){
$("#topdiv").fadeIn("slow");
} else {
$("#topdiv").fadeOut("fast");
}})});</script>
The only issue with this is that when the page loads, the div appears on top and then disappears once the user starts scrolling. I dont want the div to appear once the page loads. Something like this is exactly what i want:
http://www.calmdigital.com/
Would greatly appreciate help!

on document ready hide the div
$(function(){
if($("#topdiv").length>0)
$("#topdiv").hide();
});
or hide it via css
#topdiv{
display:none;
}