Infinite scrolling jquery not working - javascript

I have a problem with infinite scrolling... This is the code:
<script>
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
alert("test");
}
});
</script>
It alerts when user hits the top of the page, not the bottom. I can't figure out where the problem is. Thanks is advance.

$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
alert("test");
}
});
Here it alerts "test" when you hit the bottom of the page..
fiddle: https://jsfiddle.net/845k1c2b/
Hope this helps!

Related

Execute function on bottom of the page using javascript or jquery

I want to execute the function "nextResults()" if the user has scroll on bottom, using javascript or jquery.
My code doesnt work.
My code:
$(window).scroll(function() {
if($(window).scrollTop() = $(document).height() - $(window).height()) {
nextResults();
}
});
Change to:
$(window).scrollTop() === $(document).height() - $(window).height()
$(window).scroll(function() {
if($(window).scrollTop() == $(document).height() - $(window).height()) {
nextResults();
}
});
wrong conditional expression, it should be '==' but yours is '='
you can test it here, check the browser developer tools console: JSFiddle

jquery : detecting scroll position

I want to get an alert when, while scrolling, my footer comes to view.
$(window).on("mousewheel", function(){
if ($(window).scrollTop() + $(window).height() > $('#footer').position().top){
alert("footer visible");
}
else{
alert("footer invisible");
}
});
http://jsfiddle.net/JRUnr/10/
All conditions with height seem right, but not during scrolling.
Working DEMO
Try this
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() > $('.footer').offset().top) {
alert("footer visible");
} else {
alert("footer invisible");
}
});
Hope this helps,Thank you
There is a jquery plugin for this task named jQuery Waypoints
(http://imakewebthings.com/jquery-waypoints/)
$('#footer').waypoint(function(direction) {
alert('Top of thing hit top of viewport.');
});
here is a working fiddle...
http://jsfiddle.net/kasperfish/JRUnr/14/
it is hacked together but it works
flag=true;
$(window).scroll(function() {
st=$(window).scrollTop();
$('#topscroll').html(st)
if(st>1450){
if(flag)
alert('test');flag=false;
}
});

how can Change target from tinyscrollbar to body when reaches top/end of it?

I am trying to implement tiny-scrollbar into my website and, i want to change target from tiny-scrollbar to body when it reaches top or end of body, how can i do this,please help.
not able to understand your question completely...but is this what you want?
FIDDLE DEMO
$(document).ready(function () {
$(window).scroll(function(){
var ScrollTop = parseInt($(window).scrollTop());
console.log(ScrollTop);
if (ScrollTop == 0) {
alert("i just hit the t0p");
}
else if(ScrollTop == 1574){
alert("i just hit the bottom");
}
});
});
UPDATE:
UPDATED FIDDLE
Just use console log to check the scrollTop and give your conditions accordingly.Hopw this helpps

jQuery Scroll function after 100px

Using this script:
<script>
$(function() {
$(window).scroll(function(){
$('#Your element id').slideUp('slow');
});
});
</script>
Is it possible only to perform the action after the user has scrolled 100px or more?
You do need scrollTop as said. It would be wise to include an 'else' function as well, so that when you scroll back to the top the toggled element gets hidden again. As such:
$(document).ready(function() {
$('#scrollDiv').hide();
$(window).scroll(function() {
if ($(document).scrollTop() > 100) {
$('#scrollDiv').fadeIn('slow');
}
else {
$('#scrollDiv').fadeOut('slow');
}
});
});​
Here is a quick jsfiddle
You can use .scrollTop() to get how far the page has been scrolled
<script>
$(function() {
$(window).scroll(function(){
if($(this).scrollTop() > 100) {
$('#Your element id').slideUp('slow');
}
});
});
</script>

How do I use JQuery to detect if a user scrolls to the bottom of the page?

And once it hits the bottom,then have a callback function?
You can use .scroll() event in this way on your window:
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
alert("bottom!");
}
});
check live demo
to detect if the user is 3/4 down the page you can try this one
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - .75*$(document).height()) {
alert("3/4th of bottom!");
}
});

Categories

Resources