fadeIn() doesn't work but fadeOut() is ok
Question
I want to add a fadeIn() and a fadeOut() to my scrollToTop but the fadeIn is'nt worked.
If you want ot see, I've created some GIF : First GIF Here
As you can see the fadeIn() on the scrollToTop button is triggered by the scroll of the windows,
This is my code :
$(document).ready(function() {
//Check to see if the window is top if not then display button
$('.modal-content').scroll(function() {
if ($(this).scrollTop() > 100) {
$(".scrollToTop").fadeIn(1000);
} else {
$('.scrollToTop').fadeOut(1000);
}
});
//Click event to scroll to top
$('.scrollToTop').click(function() {
$('.modal-content').animate({
scrollTop: 0
}, 500);
return false;
});
});
<a id="up" class="scrollToTop" style="display:none;"><i class="fa fa-arrow-up" aria-hidden="true"></i></a>
5 answers
solution1
0 2016-06-15 11:28:13
I'm not an expert at jQuery, but it looks to me as though your problem resides in you invoking fadeIn nearly every time the page is scrolled. What I suggest is that you create a boolean, called buttonShowing (or whatever), and set it to false.
Then, change buttonShowing every time the user scrolls, at the end of the appropriate if and else statements. Then, at the beginning of the if/else statements, you can check if the buttonShowing state has changed and only fadeIn/Out if the state has changed since the last scroll event fired. Here is the code:
$(document).ready(function() {
var buttonShowing = false;
//Check to see if the window is top if not then display button
$('.modal-content').scroll(function() {
if ($(this).scrollTop() > 100) {
if(!buttonShowing) $(".scrollToTop").fadeIn(1000);
buttonShowing = true;
} else {
if(buttonShowing) $('.scrollToTop').fadeOut(1000);
buttonShowing = false;
}
});
//Click event to scroll to top
$('.scrollToTop').click(function() {
$('.modal-content').animate({
scrollTop: 0
}, 500);
return false;
});
});
solution2
0 2016-06-15 11:28:45
Best Solution for you:
$(window).scroll(function() {
var scroll_pos = window.pageYOffset;
var scroll_div = $('.modal-content').offset().top;
if(scroll_pos > scroll_div) {
if ($(this).scrollTop() > 100)
$(".scrollToTop").fadeIn(1000);
else
$('.scrollToTop').fadeOut(1000);
}
});
or Change $('.modal-content').scroll(function() { to $(window).scroll(function() { . See:
$(document).ready(function() {
//Check to see if the window is top if not then display button
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$(".scrollToTop").fadeIn(1000);
} else {
$('.scrollToTop').fadeOut(1000);
}
});
//Click event to scroll to top
$('.scrollToTop').click(function() {
$('.modal-content').animate({
scrollTop: 0
}, 500);
return false;
});
});
solution3
0 2016-06-15 11:32:11
This example may help you. :
<html>
<head>
<style>
body {
height: 1200px;
}
div {
width: 50px;
height: 50px;
background-color: red;
border-radius: 100%;
position: fixed;
display: none;
}
</style>
</head>
<body>
<div id="cir"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(window).scroll(function(){
if($(document).scrollTop()>100)
$("#cir").fadeIn(1000);
else
$("#cir").fadeOut(800);
})
</script>
</body>
</html>
solution4
0 2016-06-15 12:31:19
The solution with $(window).scroll(function() doesn't work, certainly beacause this script is used on a modal.
This is an of my HTML code with the modal :
<!-- Modal Structure --> <div id="modal1" class="modal modal-fixed-footer"> <div class="modal-content"> <!-- My content --> <h4>Ajouter une recette</h4> <div class="row"> <div class="input-field col s6 offset-s3"> <input id="libelle" type="text" class="validate"> <label for="libelle">Nom de la recette</label> </div> </div> <form id="form_ingredient"> <div class="row"> <div class="col s4 offset-s1 input-field"> <input id="ingredient" name="ingredient" type="text" class="validate"> <label for="ingredient">Ingredient</label> </div> <div class="col s4 offset-s2 input-field"> <input id="poid" name="poid" type="number" class="validate"> <label for="poid">Poid</label> </div> </div> </form> </div> <div class="modal-footer" style="text-align: right;"> <!-- My footer --> <a id="up" class="scrollToTop" style="display:none;"><i class="fa fa-arrow-up" aria-hidden="true"></i></a> <a id="add_ing"><i class="fa fa-plus" aria-hidden="true"></i></a> <a id="valid_ing" style="margin-left: 1.5%;"><i class="fa fa-check" aria-hidden="true"></i></a> </div> </div> <script> //The script that I try to use </script>
solution5
0 2016-06-15 13:23:36
I resolved my problem with Css, I just add these class to my stylesheet :
.scrollToTop{
opacity:0;
text-decoration: none;
transition:opacity 1s ease-in;
float: left; }
.scrollToTop.visible {
opacity:1; }
And this Js and that works :
$('.modal-content').scroll(function(){
if ($(this).scrollTop() > 100) {
$(".scrollToTop").addClass('visible').css("cursor", "pointer");
} else {
$('.scrollToTop').removeClass('visible').css("cursor", "default");
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.