Scroll to certain height of a page javascript - javascript

I've a very simple one line code that checks whether user has scrolled to the bottom of the page, I want to change it a little bit & find whether user has reached the footer of the page. And height of footer is somewhat 350px.
Here's my code:
if($(window).scrollTop() + $(window).height() == ($(document).height())
{
...
}
This works like a charm (loads more content on scroll event), but if I do like this:
if($(window).scrollTop() + $(window).height() == ($(document).height()-350))
This doesn't work. When I attempt to alert('$(document).height()-350'). It gives a perfect alert.
Can anyone say what I'm doing wrong?

you are probably scrolling more than 1 pixel at a time and just skip the equality point. make it a >= and it should work:
if($(window).scrollTop() + $(window).height() >= ($(document).height()-350))

Try
if($(window).scrollTop() + $(window).height() >= $(document).height()-350)
Also you have '(' char in front of $(document).height() which needs to be removed

You want to use >= instead of ==, otherwise you must be pixel-perfect in your scroll in order for the event to fire.
Give this a try. You can use the .offset().top of your footer element to get the Y-position relative to the document.
var scrollBottom = $(window).scrollTop() + $(window).height();
var footerTop = $('#footer').offset().top; // change selector as needed
if ( scrollBottom >= footerTop ) {
alert("hello footer");
}

Related

Jquery ajax infinite scroll exclude footer height

I'm working on ajax infinite scroll. I have below code to make ajax request after scrolling at end,
$(window).scroll(function(){
if($(window).scrollTop() >= ($(document).height() - $(window).height())){
loadlist();
}
});
But it fires when scrolled at end (including footer.). But I want it fired when the footer is just starting to show while scrolling (footer height is 300px).
I researched and tried following code,
$(window).scroll(function(){
if($(window).scrollTop() >= ($(document).height() - $(window).height()) - 300){ // 300px footer height
loadlist();
}
});
But It seems dirty. the function gets fired too many times when scrolling. any good solutions ?
I'd take the approach of triggering the behaviour when your footer element first scrolls into view.
var $footer = $("#my-footer");
$(window).scroll( function() {
if (isScrolledIntoView($footer) ) loadList();
});
See Check if element is visible after scrolling to get the code for isScrolledIntoView().

Scroll position for bottom end of page

I wanted to do an endless scrolling for my web application. In order to do action while reaching bottom side of page I tried this code:
var count = 2;
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
alert("REached page down");
search(false, count);
count++;
}
});
But unfortunately this is being called when I scroll to topmost side of page. I tried to return scroll position as a onclick event to the bottom most div of my page which returned :
$(window).scrollTop() as 1614
$(document).height() as 2250
$(window).height() as 2250.
Any other ways to achieve it?
You can check for page bottom with this code.
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 500) {
// fun stuff goes here
}
500 is the offset value from the bottom, as you might want to trigger your code a bit earlier to prepare content.
For example, hipster.cc uses the same code for endless scrolling.

Detecting when user has scrolled to the pixel just before seeing the footer

I'm trying to detect when my user has scrolled to the point just before he sees the first pixel of the footer.
Here is how I'm trying to calculate the position just before the footer:
footerVisible = $(document).height() - $(window).height() - $('footer').height() - 1;
alert(footerVisible);
I'm taking the height of the whole document and subtracting the viewport height and the height of the footer.
This alerts me 3695.
Now I'm logging the scroll position like this:
$window.scroll(function(e){
console.log($window.scrollTop());
}
When scrolling all the way to the bottom of the document (ie: seeing the full footer and end of document) the console indicates I'm at position 3211.
My logic is clearly flawed somewhere...
How can I calculate the 'scrollTop' position that the user will be on just before he sees the first pixel of the footer.
Can anyone provide a fiddle that throws an alert juste before the user sees the footer?
EDIT
Fiddle available here
To see the "first pixel of the footer", the scroll position will have to be one pixel less from one window height from the height of the footer.
var footerVisible = $(document).height() - $(window).height() - $('footer').height() - 1;
Your scroll function should be something like this:
$(window).scroll(function() {
if( $(window).scrollTop() >= footerVisible ) {
alert('Footer Visible');
}
});

Calculating end of scroll on a web page

I need to calculate the end of scrolling on web page so that i can make an Ajax call.
I have searched posts in stackoverflow, but the solutions didn't worked for me.
I am using the below code ion order to determine that:
$(window).scrollTop() == $(document).height() - $(window).height()
but the above condition fails and am not able to get to know when page scroll ends.
As the values don't match on L.H.S and R.H.S the condition fails.
Just in order to check i used:
$(window).scrollTop() == $(document).height() - $(window).height() - 13
which works for chrome and firefox but fails for IE.
I need a concrete solution and don't want to hard code values.
Please help me in getting it right.
EDIT: To be specific, i am trying to calculate the end of vertical scroll bar.
Here is what I would do:
$(window).on('scroll', function() {
if($(window).scrollTop() != 0)
{
if( $(window).height() + $(window).scrollTop() >= $(document).height() )
{
//YES, I AM EXACTLY AT THE END OF THE SCROLL, PLZ FIRE AJAX NOW
}
}
});
CAUTION: Be very careful about having negative top margins though for styles in any of your elements on the page!! it may offset the calculation!
to calculate the end of scroll, try scrollHeight property.
This should retrieve the page height for you (not using jQuery but javascript instead):
var height = document.body.clientHeight;
You will find that this is the best cross-browser solution to your problem.
Here's how you do it. You take the scrolled distance and add the window height, then check if they equal the document height :
$(window).on('scroll', function() {
if (($(this).scrollTop() + $(this).height()) - $(document).outerHeight(true) >= 0) {
alert('Scrolled to bottom');
}
});
FIDDLE
This works for me in all five browsers!

Event at the end of the document

I don't understand why this doesn't work. Explanation will be appreciated.
var scrollTop = $(window).scrollTop();
var height = $(window).height();
if (scrollTop === height ) {
alert("end!");
}
http://jsfiddle.net/Zasxe/
$(window).height() gives you the size of the user's viewport, not the size of the total document, which is what you most likely want. To find if the user has reached the end of the document, you've got to find the document's size, by $(document).height().
Furthermore, to find if a user's reached the end of the document, using jQuery, you need to capture the scroll event, and see if the user's reached the bottom:
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() === $(document).height()) {
alert("end!");
}
});
There's no event handler. That code only gets run once, when the page loads.
$(document).scroll(function () {
// Your code here
});
Be aware that the code will run every time you scroll, so don't make it to heavy.
And as someone else said, there were a number of other things wrong with the code - but start with putting the handler in.

Categories

Resources