Alert using Jquery when Scroll to end of Page
https://stackoverflow.com/questions/3799542
-
05-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
Is there a way to find out page end using Jquery, so that a simple message can be displayed saying you have reached end of the page.
해결책
How to tell when you're at the bottom of a page:
if ( document.documentElement.clientHeight +
$(document).scrollTop() >= document.body.offsetHeight )
{
// Display alert or whatever you want to do when you're
// at the bottom of the page.
alert("You're at the bottom of the page.");
}
Of course you want to fire the above whenever the user scrolls:
$(window).scroll(function() {
if ( document.documentElement.clientHeight +
$(document).scrollTop() >= document.body.offsetHeight )
{
// Display alert or whatever you want to do when you're
// at the bottom of the page.
alert("You're at the bottom of the page.");
}
});
Here is a jsFiddle example that fades in a "You're Done! Scroll to Top of Page" link when the user has scrolled to the bottom of the page.
References:
다른 팁
This will work and I tested it in IE 7,8,9 , FF 3.6, Chrome 6 and Opera 10.6
$(window).scroll(function()
{
if (document.body.scrollHeight - $(this).scrollTop() <= $(this).height())
{
alert('end');
}
});
If the above solutions don't work please check if you set your document type right:
<!DOCTYPE HTML>
Took me an hour to find out :)
To avoid duplicate console.log('end of page'), you need create a setTimeout, like this:
var doc = $(document), w = $(window), timer;
doc.on('scroll', function(){
if(doc.scrollTop() + w.height() >= doc.height()){
if(typeof timer !== 'undefined') clearTimeout(timer);
timer = setTimeout(function(){
console.log('end of page');
}, 50);
}
});
It might need tweaking to account for browsers, but something like this should do:
$(document).scroll(function()
{
var $body = $('body');
if (($body.get(0).scrollHeight - $body.scrollTop) == $body.height())
{
// display your message
}
});
Note for debugging: I was getting the alert on return to the top of the page(?) using jquery-1.10.2.js. Loaded jquery-1.6.4.min.js and all is well.
