JQuery show effect not working
this is the HTML code:
<section class="navbar-sticky-btn-body" id="back-top">
<a>
<img src="../Images/Shared/BackToTop.png" />
</a>
</section>
and jquery:
$(document).ready(function () {
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 50) {
$('#back-top').show("fold", null, 500);
} else {
$('#back-top').hide("fold", null, 500);
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
as you can see I am using the fold effect to apply the function to the display, but every effect I use I see the same result!
I should have made a stupid mistake, but unfortunately I cannot fix it!
+3
source to share
2 answers
download another version of jquery UI which includes Effect (check it as true) functions from jqueryui.com/download .
+2
source to share
In this code, you want to show something when you scroll down, right? But if it's at the top of the page, you won't see it. If so, you should add something like this in your CSS:
#back-top{
position:fixed;
top:0px;
}
Also, it will do the animation every time, so you need to check if the element is hidden or not to make the animation:
if ($(this).scrollTop() > 50) {
if($('#back-top').css("display")=="none"){
$('#back-top').show("fold", null, 500);
}
} else {
$('#back-top').hide("fold", null, 500);
}
And don't forget to add jQuery and jQuery UI.
Here is the Demo working
0
source to share