This must be some silly error but in my javascript function, the if statment that should be executing when i reach bottom of screen, is executing when i reach top of my screen ...
Here is my code :
$(window).scroll(function() { //detect page scroll
if($(window).scrollTop() + $(window).height() == $(document).height()) //user scrolled to bottom of the page?
{
$('.animation_image').show(); //show loading image
}
});
.animation_image is a loading image that should appear when i reach bottom of screen but is appearing when i scroll down and then back up to the top of the screen ...
If someone can explain what i am doing wrong, that would be great !
Well it should work properly. Though just out of curiosity, this code never hides the image. Shouldn't it have else where you give it a hide?
There you go, a Fiddle https://jsfiddle.net/3eg18L8u/
$(window).scroll(function() { //detect page scroll
if($(window).scrollTop() + $(window).height() == $(document).height()) //user scrolled to bottom of the page?
{
$('.animation_image').show(); //show loading image
}
else {
$('.animation_image').hide(); //show loading image
}
});
Have you tried >= instead of ==?
if ($(window).scrollTop() + $(window).height() >= $(document).height())
{
$('.animation_image').show(); //show loading image
}
How about:
$(document).ready(function(){
$(window).scroll(function(e){
e.stopPropagation();
e.preventDefault();
var scrollBottom = $(document).height() - $(window).scrollTop() - $(window).height();
if (scrollBottom == 0) {
$('.animation-image').show();
}
});
});
I can't seem to understand why it isn't working even with all the help from you guys, so i gave up and decided to go with this code wich isn't the solution, but more an alternative :
function yHandler(){
var wrap = document.getElementById('wrap');
var contentHeight = wrap.offsetHeight;
var yOffset = window.pageYOffset;
var y = yOffset + window.innerHeight;
if(y >= contentHeight){
$('.animation_image').show();
}
var status = document.getElementById('status');
status.innerHTML = contentHeight+" | "+y;
}window.onscroll = yHandler
With html content structure like follows:
<body>
<div id="status">0 | 0</div>
<div id="wrap">
*ALL CONTENT*
</div>
</body>
and CSS:
div#status{position:fixed; font-size:24px;}
Related
I am using the below code for infinite scroll. It works perfectly, but only when I am at the very bottom of the page. I want it to load the next page of content when I am around 3/4 down the page.
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
$('#infinite-load').click();
}
});
I changed the code to this:
$(window).scroll(function() {
if($(window).scrollTop() <= ($(document).height()) - $(window).height() - 10) {
$('#infinite-load').click();
}
});
And now, on the very first scroll, no matter how little I scroll down, the next page's content loads. Scrolling a pixel once more will cause yet anther page to load.
Try to change your code to this.
Not sure if it'd work..
var h = ($(window).height()*1.25)+$(window).scrollTop();
h = parseInt(h);
var h2 = parseInt($(window).height()*1.25);
if(h >= ($(document).height()) && h <= ($(document).height())+h2)
I want to know a code for continuous website that if i scroll to the bottom and will get back to top, and otherwise.
i already in a half way that i used this code for the bottom page :
$(document).ready(function() {
$(document).scroll(function(){
if (document.documentElement.clientHeight + $(window).scrollTop() >= $(document).height()) {
$(document).scrollTop(0);
}
});
});
how can i make conversely?
from top to the bottom page?
EDIT:
$(document).ready(function() {
$(document).scroll(function(){
if (document.documentElement.clientHeight + $(window).scrollTop() >= $(document).height()) {
$(document).scrollTop(0);
}
else if ($(window).scrollTop() <= 0) {
$(document).scrollTop($(document).height());
}
});
});
i tried that code and it works, but i think there is a little bug there, i need to scroll a bit more to get to bottom from top or otherwise, why is that happen?
Thanks
scrollTop can't go below 0, so you probably want to leave a buffer at the top of the page which sends you to the bottom when you scroll above it.
Something like this:
var BUFFER = 10;
$(document).ready(function() {
$(document).scrollTop(BUFFER);
$(document).scroll(function(){
var scrollPos = document.documentElement.clientHeight + $(window).scrollTop();
if (scrollPos >= $(document).height()) {
$(document).scrollTop(BUFFER);
} else if (scrollPos < BUFFER) {
$(document).scrollTop($(document).height());
}
});
});
i think this will help
window.scrollTo(0,document.body.scrollHeight);
or if you want to use jQuery get it from this thread
http://codepen.io/BrianDGLS/pen/yNBrgR
This is what I am currently using which allows the user to track where he is on the page.
What would I have to do to show a div when the user reaches the bottom of the page? And continue to show it until he hits refresh
#show {display: none}
<div id="show">
<p>Hello</p>
<p>World!</p>
</div>
Show the div '#show' when the user reaches the bottom of the page and continue to show it for as long as he stays on the page.
Using a convention that mirrors the sample JS code:
$(window).scroll(function() {
var wintop = $(window).scrollTop(),
docheight = $(document).height(),
winheight = $(window).height(),
scrolled = (wintop / (docheight - winheight)) * 100;
if (scrolled >= 100) {
$(yourDiv).show();
}
});
The computation of the scroll percentage is straight from the link you provided and the condition just checks if you've reached 100% of the page (minus current window size).
You could also change 100 to be whatever percentage if you want to load the div before the user reaches the absolute bottom.
It could be something like:
$(window).on('scroll', function(){
var op = $(window).scrollTop() + $(window).height();
if( op >= $(document).height() ) $("#show").show();
});
You need to trigger a Javascript function when the <div id="show"> is visible in the client's viewport, for that you can use a plugin
try below code
var show=false;
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height() || show==false) {
$("#show").show();
show=true;
}
});
I've got a script that works out the distance of a list of elements from the top of the page, but I am unsure how to detect it's distance from the bottom. When it hits the bottom (well, 20px before the bottom) I want to fire an event and fade it out:
$(window).on('load resize scroll', function () {
$('.links__item').each(function () {
if (($(this).offset().top - $(window).scrollTop()) < 20) {
$(this).stop().fadeTo(100, 0)
} else {
$(this).stop().fadeTo('fast', 1)
}
})
})
If anyone has any advice, much appreciated. I'm looping through the elements to detect it, so when one of them hits 20px from the bottom, I want to fade it out. Thanks!
You can use the jQuery function height() at your calculations, like:
$(window).height();
$(this).height();
Specifically, if you want to detect if the top of the element is near to the bottom of the page, you can use this calc:
if ( $(this).offset().top > ($(window).scrollTop() + $(window).height() - 20) ) // True
Halcyon,
I am not sure what you want to fire but you can test the bottom of the page like this
$(window).on('load resize scroll', function () {
$('.links__item').each(function () {
if( ($(this).offset().top > ($(window).scrollTop() + $(window).height() - 20)) {
$(this).stop().fadeTo(100, 0)
} else {
$(this).stop().fadeTo('fast', 1)
}
})
})
Reason being is jQuery finds bottom of the page based upon its height
1 $(window).height(); // returns height of browser viewport
2 $(document).height(); // returns height of HTML document
I am trying to implement an "infinite-scroll" behaviour to load some photos on a page and I'm using the following JavaScript to do so:
$(document).ready(function(){
$(window).scroll(function(){
var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();
var scrolltrigger = 0.10;
if ((wintop/(docheight-winheight)) > scrolltrigger) {
console.log('scroll bottom');
lastAddedLiveFunc();
}
});
});
By default I would like to fill up the users page with just enough photos to throw in a scroll bar - otherwise the above JavaScript would never fire (if only 3 images are loaded say). The photos are loaded with an ajax call at the end of
lastAddedLiveFunc()
Any idea how I could achieve this?
He is a jsFiddle I made that does what I think you are looking for: http://jsfiddle.net/pseudosavant/FENQ5/
Basically any time the position of the bottom of the window gets within X pixels of the bottom of the document I add some content.
Javascript:
$(document).ready(function(){
$(window).scroll(function(){
var docBottom = $(document).height();
var winBottom = $(window).height() + $(window).scrollTop();
var scrollTrigger = $(window).height() * 0.25;
if ((docBottom - scrollTrigger) < winBottom) {
$("#container").append("<div class='box red'></div>");
console.log("added more");
}
});
});