Scroll Browser Window with jQuery - javascript

I want to scroll the browser window in response to certain user actions.
I found out about scrollLeft in a stackoverflow response. From there, I was able to find scrollTop and ended up with the following:
$(window).scrollTop((Number($(window).scrollTop())+100)+'px');
This does in fact scroll, but to the top of the page. No matter what value I replace 100 with (I even tried negative numbers), it always just jumps to the top of the page. (Note: $(window).scrollTop() is returning 0.)
Can someone give me some tips to what I might be missing?

scrollTop just takes a number, rather than a px value.
$(window).scrollTop($(window).scrollTop()+100);
That should be enough.

No px required...
$(document).ready(function(){
$(window).scrollTop(($(window).scrollTop()+600));
});
Fiddle

YOu don't need Number cause scrollTop returns a number
scrollTop will perform if there's some scrollHeight available that is higher than the element's height, and it's always a positive number.
and it should look like:
$(window).scrollTop( $(window).scrollTop()+100 );
you don't need the 'px'

Related

Document scrollheight minus height

I'd like to animate scroll to the end of the page, so I need to know the position scrollheight minus height in HTML document.
I tried to document.body.scrollHeight - screen.height, but document.body.scrollTop to that value leaves a little space at the end.
How to make it exact and cross-browser? No need to support old IE.
I played with documentElement, body and window objects and their offsetHeights, availHeights etc, but still can't get correct value. I expected it to be simple, but I just can't figure it out.
In the final formula I'd like the explanation how does it work in browsers, so please do not respond like
$(something).yourHeight() works for me.
Use window.innerHeight.
screen.height gives the height of available pixels/screen. But we need the height of viewport. So this should work:
document.body.scrollTop = document.body.scrollHeight - window.innerHeight

Get distance of window from the top of document on page load (javascript only)

I've been having trouble calculating this on page load. It should only take one line but I can't seem to get it.
could you elaborate on what the "distance of window to document" means? if you are looking for screen height/width:
window.screen.height
window.screen.width
or
window.screen.availHeight
window.screen.availWidth
for vertical scroll position use:
window.pageYOffset
window.scrollY
I'm pretty sure they are equivalent i.e.
window.pageYOffset == window.scrollY; // always true
DSOC (document scroll offset coordinates) can be found with window.pageXOffset and window.pageYOffset. In your case, you want window.pageYOffset.
More details here:
http://www.javascriptkit.com/javatutors/static2.shtml
I realize that this is an old question, but I had the same problem and sought out a way to fix it. It appears that window.scrollY is not set directly on page load. However, if you do the following, it will register the correct value:
window.setTimeout(function() { console.log(window.scrollY); }, 10);
I've determined that the extra 10ms allows for the document to load and for it to set the window.scrollY value.

Trigger JQuery function when passed half way down the page

Is there a way to tell if you have scrolled passed the center of the web page or in other words, when you have scrolled passed exactly half of the web page and your scrollbar is situated in the lower half of the browser window?
I want to be able to trigger this:
$('.pineapple-man').show(); when I have scrolled down passed half of the page?
Is this possible at all?
Your help would be so kind!
You can get the pixel amount of an element has been scrolled by using .scrollTop(). To listen to scroll events use .scroll().
When you want to identify the halfway, use height of the scroll:
$(window).scroll(function () {
if ($(window).scrollTop() > $('body').height() / 2) {
$('.pineapple-man').show();
}
});
If you are scrolling some other element than the whole window/body, please feel free to change the selectors.
To make the showing one-timer, add the removal of scroll event listener, by adding the following after the .show() call:
$(window).unbind('scroll');
I guess you want to do something like this:
if($(document).scrollTop() > $(document).height()/2){
$('.pineapple-man').show();
}
where scrollTop() gets the current horizontal position and height() defines the document height.
See the scroll event and the scrollTop method.
you can use the focus event if you scroll down to it (just like jQuery uses for their comments)
jQuery('selector').focus(function() {
jQuery('.page').show();
});

Scrollbar appear / disappear event in jQuery?

Is there a simple way in jQuery to detect when scrollbars appear and disappear on a div that has overflow:auto? (Like an event? Fingers crossed...)
(I'd prefer not to have to look at the height of the content of the div)
Another way to achieve this is to check whether there are scrollbars present using scrollLeft or scrollTop:
//nudge the scrollbar away from its starting position
$('#your_selector').scrollLeft(1);
//A value of 0 is assigned if the scrollbars are at their default position,
//or are abscent
if($('#your_selector').scrollLeft() !== 0) return true;
//put the scrollbar back to its starting position
$('#your_selector').scrollLeft(0);
As others have said, there is no easy way. Here's some code I've used in the past to detect if a scrollbar is present.
// Used like $('#my-id').hasScrollbar();
jQuery.fn.hasScrollbar = function() {
var scrollHeight = this.get(0).scrollHeight;
//safari's scrollHeight includes padding
if ($.browser.safari)
scrollHeight -= parseInt(this.css('padding-top')) + parseInt(this.css('padding-bottom'));
if (this.height() < scrollHeight)
return true;
else
return false;
}
You'll manually need to call this after adding or removing content from the div and it probably will only work if you call it on visible elements, but it's better than starting from scratch.
As far as I know, there is not event for that.
However, you "could" write your own special event for that, I guess you have to check
for the height and width.
It should be possible to detect scrollbars if the .innerHeight exceds the .outerHeight
value of an element.

Adjusting elements based on scrollHeight using JQuery

Here's what i have so far:
function loadOff(){
$(document).ready(function(){
$("#eLoader").ajaxStop(function(){
$(this).hide();
$("#eventsContent").show();
var h = document.body.scrollHeight;
$("#bodyBackground").css("height",h+100+"px");
$("#sidePanel1").css("height",h-105+100+"px");
$("#bottom").css("top",h+100+"px");
});
});
}
This is a callback function for a JQuery ajax function, basically what is does is when all ajax is finished .ajaxStop() it hides the loader then shows the content.
The problem i am having is adjusting bodyBackground, sidePanel, and bottom to fit the content. I dont care to have it elastic and retract for short content at this point, i would just like it to extend to proper positioning based on content length.
All divs are absolutely positioned. The numbers in the function are broken down simply to make it easy to explain. -105 is the offsetTop of that element and +100 is the margin between the end of the content and the elements.
if there is a better, more efficient way to achieve this outcome, please, do tell.
Thanks.
Based on your code, the only thing you ought to see is the top 105px of #sidePanel1. Is that your intent? (h = the bottom of the window, according to your code.)
Sticking with the JQuery patterns, you would use
var h = $(window).height();
Maybe you're looking for this instead of the browser window's height? It will get the height of the content element.
$("#eventsContent").outerHeight();

Categories