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.
Related
I'm working on a website (http://dev-caeoli.pantheonsite.io/) and I'm stuck with a jquery problem. I'm using scrollTop in the navigation of the website. I can't use anchor links because the "main" element has position fixed in the beginning to create that scroll effect.
I'm using this code, but when the scroll occurs, the element stays below the viewport.
scrollTop: $("#work").offset().top
What I want is the element to scroll to the top of the viewport. I've used the code blow to achieve that, but it only works when you are on the top of the page because it subtracts the height of the window.
scrollTop: $("#hero").offset().top-100 + window.innerHeight
Any clues of what I'm doing wrong?
You should add current scroll amount to element's offset().to and distract fixed header height
scrollTop: $(window).scrollTop() + $("#work").offset().top - 100
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
Hope this isn't a duplicate question as I've been searching for some time for this issue and haven't found a clean solution yet. Maybe I'm just not searching correctly.
I have a navbar which has its position set to fixed trough javascript when it reaches the top of the viewport. I'm using jquery 1.11.3 to get offset().top of the element, however this value doesn't seem to update itself when the vertical height of the viewport changes.
For example, on an Android tablet with Chrome the address bar disappears, the 'resize' event is triggered but the offset().top of the element remains the same causing my navbar to remain static although it was scrolled past the top of the viewport and should be now fixed. I have also used a timeout to read the new value on resize but to no avail.
Is there some way to ask jquery to reconsider the viewport size so that I don't update my internal offset based on the new values? Or maybe this isn't the way to go?
I encounter the same problem as you. On window resize, my element offset value was not change. In my case, my element was in fixed position. Maybe yours too? But if I scroll the page, the element offset changed. So In my case, I just put a fixed offset value to be use for my element.
Try implement this code in your window resize event
elementTop = $('#element').offset().top;
windowTop = $(window).scrollTop();
if( elementTop - windowTop < 0) {
// write your set fixed position code here
}
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)
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);