We Keep Coding

Get distance of element from top of the window which changes when user scrolls

I need to find distance between top of the window to the element. I can calculate that distance using offsetTop, But in offsetTop it only gives element's distance from top of the window, What I want is to decrease the distance when user scrolls up. And increase the distance when user scrolls down. So how to achieve this?

Use .getBoundingClientRect().
See more info here: https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

How can I identify the view div section I have scrolled to?

I have a website with 4 divs that all have heights of 100vh that fill the entire view height and view width. But I can't seem to figure out the section of the div I have navigated to. Is there a way I can use
$(this).scrollTop()
to find out the view or div I am currently viewing? I know this question is quite confusing but if you understand what I am getting at, I truly need your help.

Basically, in your case, you have to know how much have you scrolled the page.
var scrolledY = window.scrollY || window.pageYOffset || document.documentElement.scrollTop;
After that, as long as your divs have height of 100vh it is the same as window.innerHeight. Therefore, you can calculate the index of div you scrolled to:
var divIdx = Math.floor(scrolledY / vh);
Now, all together: http://jsbin.com/qepodojoqa/edit?html,css,js,console,output

You need to bind an event to scroll and check if you scrolled past a div's top offset.
$(document).scrollTop()
gives you your current top scroll, and
element.offsetTop
gives you the div's offset from the top (i.e, the distance between its top and the top of its parent node, body in this case).
Be aware that there are other ways to detect the top scroll, depending on your needs.

Scroll up a certain percent

I'm wondering if there is any easy way using jquery or javascript to read the current percent that the user is scrolled down a page, and then scroll the user up that percent?
The purpose of this would be:
Var scrollPercent = Read Scroll %
Resize div that effects vertical height of page
Scroll up ScrollPercent

You can use element.scrollTop which will give the vertical offset that has been scrolled.
If your scrolling the body then element can be the document.body otherwise the relative element
Use element.offsetHeight & compare with it if you need percentages.
Another avialable option is
window.scrollY
Once you have this scroll value you can use jquery animation to scroll up to the previous location

How to open website at specific point on page in HTML?

beginner programmer so apologies if this is really obvious!
How can i get my website to open at a specific point on the page (in HTML)?
I can't find what this is called anywhere! Not Anchor etc. The website will be wider and longer than most screens. I want the screen/viewport to open at the very centre of a 2500x2500 pixel background.
I am working in DreamWeaver CC on Mac OS X 10
Thanks in advance!!
p.s no code to post, this is my first port of call in putting this together

You can get the client's screen with $(window).width() & $(window).height() , it's jQuery code so you'll have to add a balise script to the jQuery lib on your web page. Can you tell me more about what you want to do ? I have trouble understanding. You don't want any anchor but you want ? Apoligies for not understanding.

Try this bit of Javascript to fire when the page loads
window.onload = function(){
window.scrollTo(1250, 1250);
}
The window.scrollTo(x-coord,y-coord) function takes two parameters, x-coord is the pixel along the horizontal axis of the document that you want displayed in the upper left and y-coord is the pixel along the vertical axis of the document that you want displayed in the upper left.
I picked 1250, because that's 2500 divided by 2, but you may have to tweak that a little if you want that spot in the middle of the screen. You will have to get the screen's viewport and do some math.
(hint: window.innerWidth & window.innerHeight gives you the dimensions including the scroll bar; document.documentElement.clientWidth and document.documentElement.clientHeight is without the scrollbar)
The documentation for window.scrollTo() is here: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo
Some info about the viewport dimensions can be found here: http://ryanve.com/lab/dimensions/

As bryguy said, you can calculate the center of your screen and use scrollTo(). Alternatively, if you have a particular element that you want to scroll to, give the element an id and use the scrollIntoView() function. You can also center an invisible div positioning the div absolutely and setting the top and left values to 50%:
HTML
<div id="scrollToMe" style="position: absolute; top: 50%; left: 50%;"></div>
JS
window.onload = function() {
document.getElementById('scrollToMe').scrollIntoView();
};

You can do this without jQuery. You can use the native JavaScript function window.scrollTo() to scroll to the center.
To calculate the center of the screen all you have to do is:
For vertical center
Determine the height of the viewport: The height of the viewport is stored at document.documentElement.clientHeight.
Determine the height of the entire document: You can use document.documentElement.offsetHeight or document.body.scrollHeight to get the height of the entire document.
Calculate: Now simply subtract the viewport height from the document height and divide it by two like this:
(document.documentElement.offsetHeight - document.documentElement.clientHeight)/2
For horizontal center
Determine the width of the viewport: The width of the viewport is stored at document.documentElement.clientWidth.
Determine the width of the entire document: You can use document.body.scrollWidth to accomplish this.
Calculate: Now simply subtract the viewport width from the document width and divide it by two like this:
(document.body.scrollWidth - document.documentElement.clientWidth)/2
Now time to scroll
Finally, you'll want to make the window scroll to the calculated point.
window.scrollTo(centerWidth, centerHeight);
If you want to do all of it in one step, you'd do:
window.scrollTo( (document.body.scrollWidth - document.documentElement.clientWidth)/2, (document.body.scrollHeight - document.documentElement.clientHeight)/2 );
Please note that we've used document.documentElement.clientHeight (and clientWidth) and they give you the viewport size without the scrollbars. If you wish to include the scrollbars you'll have to use other variables. You can find examples of how to get those measurements on the internet.
For more information: Center a one page horizontally scrolling site in browser (not centering a div)

Center scroll bar on lower resolutions

My website's width is 1200px, when someone with lower resolution looking site horizontal scroll is visible and scroll bar is located to the left.
Is there way to locate scroll to center using css, javascript or jquery?

You don't need jquery for that. that is a basic thing for javascript.
document.body.scrollLeft = (1200-window.innerWidth)/2

The best way is to use $(window).scrollLeft();
Just place the center value of the window into the scrollLeft function and the page will reposition itself. The easiest way to find the center of the page is to take your 1200 width and divide it by 2, then subtract the calculated $(window).width(); divided by 2.
var scrollPos = (1200/2) - ($(window).width()/2);