Develop Reference

JS(jQuery) make div not appear second time when scrolling

I'm only learning JS(jQuery), and so I have a question. I wrote script where div is being showed when user scroll page to bottom and I want to add close button, so the user click on it and it will not appear when user scroll to bottom again. So:
<script>
$(window).scroll(function() {
if($(window).scrollTop() > ($(document).height() - $(window).height() - 200)) {
$('#div-name').css('visibility', 'visible')
}
};
$('#close-button).click(function(){
$('#div-name').css('visibility', 'hidden')
});
</script>
Pretty simple, but I want close-button it hide forever(till refreshed or revisit) and scroll function don't show this div for second time.
So I thought, if I do like this:
<script>
var wasClosed = false;
if(!wasClosed) {
$(window).scroll(function() {
if($(window).scrollTop() > ($(document).height() - $(window).height() - 200)) {
$('#div-name').css('visibility', 'visible')
}
}
};
$('#close-button).click(function(){
wasClosed = true;
$('#div-name').css('visibility', 'hidden');
});
</script>
But I don't understand why it not working, it keep popup again and again after i clicked close button.

FYI: You have some syntax errors in your code - missing semicolons and a missing parenthesis.
Option 1: You can unregister the scroll listener after clicking the button. Then the function where you put the visibility to visible will not be called anymore at all. Of course this only works if you don't use any other scroll scripts.
$(window).scroll(function() {
if($(window).scrollTop() >
($(document).height() - $(window).height() - 200) ) {
$('#div-name').css('visibility', 'visible');
}
});
$('#close-button').click(function(){
$('#div-name').css('visibility', 'hidden');
$(window).off('scroll');
});
Fiddle: https://jsfiddle.net/kx6fkp7n/
Option 2: initialize a variable in which you save the status, if it has been closed already. As soon as the button is pressed, you set the variable to true and in the scroll listener you make sure that the visibility changing does not occur anymore by extending the condition.
var wasClosed = false;
$(window).scroll(function() {
if(!wasClosed && $(window).scrollTop() >
($(document).height() - $(window).height() - 200) ) {
$('#div-name').css('visibility', 'visible');
}
});
$('#close-button').click(function(){
$('#div-name').css('visibility', 'hidden');
wasClosed = true;
});
Fiddle: https://jsfiddle.net/6dk443zd/
Why is your code not working: The problem with your solution is that you placed the if-condition before registering the scroll handler. So once it's registered (which is actually always on every page load) you're actually doing nothing with the changed variable. The if condition would need to be placed inside the scroll listener as stated in option 2.

Back to top button not triggering properly

I have a back to top button that appears when you scroll a little bit .It's working fine but when scrolling if I get to the footer i want the button to go above the footer.
I used the jquery animate method to change the bottom css rule of the button when I get to the bottom of the page.But that effect doesn't happen instantly on my website because i have more javascript and i think it needs to go through all the code before it runs the effect and It's just not working properly.
Where is the problem ? .Here is what I have done : JSFIDDLE
var offset = 250;
var duration = 500;
$(window).scroll(function () {
if ($(this).scrollTop() > offset) {
$('.back-to-top').fadeIn(duration);
} else {
$('.back-to-top').fadeOut(duration);
}
});
$('.back-to-top').on('click', function () {
event.preventDefault();
$('html,body').animate({ scrollTop: 0 }, duration);
return false;
});
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() == $(document).height()) {
$('.back-to-top').animate({ 'bottom': '400px' });
} else $('.back-to-top').animate({ 'bottom': '10%' });
});

It seems like adding a class that changes the position of the div, and toggling it when the condition is true solved the problem .

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

Make scrollTop to always check

I'm doing a scrollTop jQuery function, and it is working very nice, see it below:
$(function() {
$(window).scroll(function() {
var top = $(document).scrollTop();
if (top >= 1225) {
// Do something
}
});
});
However, if the user have his scrollTop, in that case, higher than 1225, and the script isn't fully loaded, the function will not happen, just if he scroll the page again. Isn't there a way to make the scrollTop to always check, not just if the user Scrolls the page?
Thanks a lot in Advance.

Yes, trigger the event yourself.
$(function() {
$(window).scroll(function() {
var top = $(document).scrollTop();
if (top >= 1225) {
// Do something
}
}).triggerHandler("scroll");
});

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!");
}
});