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
Related
I am building a Angular 9 app.
In this app I got a scrollable div (overflow: auto).
I am looking for a way to check how many pixels the div has scrolled so I can use that distance to get an accurate distance for the scrollable element inside of it.
The code below only returns the distance from the side of the window but I need to add the pixels scrolled too to get accurate value.
ui.offset.left
You have to use the scrollTop or scrollLeft attribut:
element.scrollTop // The distance of the scroll
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.
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 have a script that scrolls the window on button click. Works fine, but how do I get this to a target div only? I mean only to scroll a specific div.
I tried to put getElementById but I didn't succeed.
Is it even possible with scrollBy to do this?
<button onmousedown="skrull();" onmouseup="stop();" style="position:fixed;">Click to scroll <3</button>
<p>Some text and line breaks to enable scrolling!</p>
<script>
var skrullInterval;
function scrollWin() {
window.scrollBy(0, 100);
}
skrull = function skree() {skrullInterval = setInterval(scrollWin, 100);}
function stop() {
clearInterval(skrullInterval);
}
</script>
scrollBy() and scroll() are defined for the window object only. If you want to scroll an element you should set scrollTop to the desired offset (absolute value, unlike what scrollBy() takes; negative values are silently converted to 0).
element.scrollTop = 50;
From MDN:
The Element.scrollTop property gets or sets the number of pixels that
an element's content is scrolled vertically.
An element's scrollTop value is a measurement of the distance from the
element's top to its topmost visible content. When an element's
content does not generate a vertical scrollbar, then its scrollTop
value is 0.
Scrolling horizontally is also possible with scrollLeft. Keep in mind this though if you have to deal with right-to-left direction:
Note that if the element's direction of the element is rtl
(right-to-left) then scrollLeft is 0 when the scrollbar is at its
rightmost position (at start of the scrolled content) and then
increasingly negative as you scroll towards the end of the content.
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);