Develop Reference

Using scrollto horizontally inside a div not in the window

I have a horizontal timeline inside a scrollable div and I want to scroll it depending on the date it has.
I've created a <span> tag to identify where the div should scroll to. Basically, when it has a class="scrollTo", the scroll should move to there, without moving the whole window. It should scroll only the div.
I tried some suggestion from here, but I don't know if I am doing it right.
I used the following code:
$(".timeLineContainer").animate({
scrollTop: $(".timeLineContainer").scrollTop() +
($(".scrollTo").offset().top - $(".timeLineContainer").offset().top)
});
Here is my code in JSFiddle:
https://jsfiddle.net/douglasbrca/j2o546wr/2/
Any suggestion based on the code above?

Ok so with this :
Fiddle : https://jsfiddle.net/j2o546wr/6/
Js:
$(document).ready(function(){
if($(".scrollTo").length > 0){
$(".timeLineContainer").animate({scrollLeft: $(".timeLineContainer").scrollLeft() + ($(".scrollTo").offset().left - $(".timeLineContainer").offset().left)});
}
});

Scroll to div on clicking the div

Here is the fiddle link https://jsfiddle.net/hitech0101/5vhdm5hy/
$('.block').click( function () {
$('#mainContainer').animate({'width':'20%'}, 1000);
$(this).css({'background-color':'blue'});
$('.block').css({'display':'block','width':'100%'});
$('.second').css({'display':'inline-block'})
});
In the fiddle, i am using jquery to convert the horizontal blocks into vertical blocks. I have changed the block color from red to blue when the block is clicked. When i click a particular block i would the scroll to move to the location of the block in the vertical view. I have tried jquery's scrollTop() method but still could not get it working the way i wanted it to. Please help.
The fiddle is partial representation of the webpage i am working on. There is more content on the original page which i have excluded. The maincontainer is the second container on the page.

No JavaScript necessary. You can specify an element in an anchor's href and it'll scroll it to the top of the window, including itself.
Wrap the div in an anchor or just use the anchor tag itself, they're both wrappers.
<a href="#scrollToMe">
<div id="scrollToMe"></div>
</a>
Just remember that it can only scroll the element into view to the best of its ability, if the item is at the bottom of the parent element the scroll will hit the bottom and it won't be able to go any further.

$(this).get(0).scrollIntoView();
Add this line into the .click function.
Fiddle

I suggest you get the offset top value and animate the #maincontainer to that position
$('.block').click( function () {
$('#mainContainer').animate({'width':'20%'}, 1000);
$(this).css({'background-color':'blue'});
$('.block').css({'display':'block','width':'100%'});
$('.second').css({'display':'inline-block'});
/*below is what i was talking about*/
var pos = $(this).offset();
$('#mainContainer').animate({ scrollTop: pos.top });
});

$(document).on("click", ".block", function() {
var _body_html = $('html, body');
var _scroll_to = $('.scroll-to');
var _top = _scroll_to.offset().top;
_body_html.animate({
scrollTop: _top
}, 1000);
setTimeout(function() {
_body_html.finish();
}, 1000);
});

Use javascript to calculate div height as a percentage?

After some searching I've come across code similar to the demo below that uses js to calculate the height of a div and then sets that number as a margin top to the div below.
This works fine however I need it to calculate as a percentage rather than a 'px' as when I scale down and the responsive image gets smaller the margin-top obviously doesn't scale with it. I'm not sure if this is possible or how I would achieve it?
jsFiddle
JS:
$(document).ready( function(){
var fixedHeight = $(".fixed-container").outerHeight(true);
$(".scrolling-container").css({"float":"left", "margin-top":
fixedHeight + "px"});
});
Any suggestions or solutions would be most appreciated.

You don't need a percentage if you're using jQuery. Use $(window).resize() to update it any time the window updates.
The other reason you can't use a percentage on the height is that you have no container that has a set height. This means it's going to be a percentage of the entire page. The more content you add, the bigger the margin will be. Use this code to achieve what you're doing:
function extraMargin() {
var xMar = $('.fixed-container').outerHeight();
$('.scrolling-container').css({"margin-top":xMar+"px"});
}
$(document).ready(function(){
extraMargin();
});
$(window).resize(function(){
extraMargin();
});
This will run extraMargin() function when the page loads and when the page is resized.
Here's a fiddle

I hope the following steps work if i understand your problem in right way .
$(document).ready( function(){
var fixedHeight = $(".fixed-container").outerHeight(true);
fixedHeight = (fixedHeight/screen.height)*100
$(".scrolling-container").css("margin-top", fixedHeight + "%");
});

Actually repeat the complete code on resize window function too:
$( window ).resize(function() {
var fixedHeight = $(".fixed-container").outerHeight(true);
$(".scrolling-container").css({"float":"left", "margin-top":fixedHeight + px"});
});

JQuery create a scroll follow div

ok I have seen people using position:fixed to have a div follow the scroll.
I have also seen the following solution which is good ( Jquery follow scroll ) but I was wondering how I can accomplish 2 effects :
create a smooth scroll for the box
scroll the box inside a div (so if the scroll is higher than the holder div, the box should be on top of the div, and when you scroll down it should scroll inside)
an example of these features can be found here : http://www.limestonenetworks.com/dedicated_servers/order.html?id=47
but I cant figure out what they used and even if they used a library.

As a slight alternative to Adam Hutchinson's
http://jsfiddle.net/HelloJoe/JjuQu/
It's pretty self explanatory but just say if you need anything explained.

This div in the example is not polsition:fixed, or absolute. What they do is to animate the margint-top attribute on scroll relatively

Looks like you need to map an event to the document scrolling and then move a div relative to the scroll. Something along these lines may give you somewhere to start.
$(document).scroll(function(){
$('#divtomove').css('top', $(document).scrollTop());
})

Also, this is the code in the example page, just to get an idea
var $scrollingDiv = $("#customize");
$(window).scroll(function () {
if ($(window).scrollTop() > 490) {
if (($("#maincontentbox").height() - $(window).scrollTop()) > 0) {
$scrollingDiv.stop().animate({
"marginTop": ($(window).scrollTop() - 500) + "px"
}, "slow");
}
} else {
$scrollingDiv.stop().animate({
"marginTop": "0px"
}, "slow");
}
});

Simpler solution:
$('#divtomove').scrollFollow();

Can you get the user’s scroll position every time they scroll with JavaScript/jQuery?

Is it possible to grab the current position of the users scroll bar when they scroll?
Say, if they were scrolled to the very top it would be 0, if they scrolled down it'd change.
Can I assign a variable to contain the current scroll position whenever I access it, or is there a function in JavaScript for this already?

From your comment, I get you are looking for a scroll event listener such as
http://api.jquery.com/scroll/, and then you can use http://api.jquery.com/scrollTop/ to find out the position of the scroll.
For example:
<script>
$(window).scroll(function () {
//You've scrolled this much:
$('p').text("You've scrolled " + $(window).scrollTop() + " pixels");
});
</script>
http://jsfiddle.net/pFaTF/

There are properties on the window object for this: window.scrollX and window.scrollY.
See e.g. http://javascript.gakaa.com/window-scrollx-2-0-scrolly.aspx

You can get the scrollTop property of the body element:
document.getElementsByTagName('body')[0].scrollTop;
This returns the number of pixels that are above the visible area.So 0 when the user hasn't scrolled, bodyheight-viewporthieght when the scrollbar is at the bottom.

Try using .scrollTop()
Here is an example:
http://jsfiddle.net/LZM7H/
Edit
If you are trying to output the position of the element being scrolled as it happens then this can be achieved using the .scroll() event:
$('#container').scroll(function(){
var position = $('#container').scrollTop();
});
Here is a live example:
http://jsfiddle.net/LZM7H/2/

as additional to Paul D Waite answer, you can told the browser to scroll the window to by using window.scroll(0,0);, where the value is referencing to x and y position.