CODEWITHSUNDEEP
jqueryshow
ConductedClever
ConductedClever

Reputation: 4305

Jquery show effect doesn't work

this is the HTML one:

<section class="navbar-sticky-btn-body" id="back-top">
    <a>
        <img src="../Images/Shared/BackToTop.png" />
    </a>
</section>

and the jquery is this:

$(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 see i use the fold effect to be applied to showing function but every effect i use i see the same result!

i should have make a silly mistake but unfortunately i can't fix it!

Upvotes: 3

Views: 859

Answers (2)

Shivang MIttal
Shivang MIttal

Reputation: 1001

download another version of jquery UI which include "Effect" functions (check it as true) from jqueryui.com/download .

Upvotes: 2

Ruben R Aparicio
Ruben R Aparicio

Reputation: 673

In that code you want to show something when you scroll down, right? But if it is at the top of the page you will no see it. If that is the case you should add somethig like this to the CSS:

#back-top{
    position:fixed;
    top:0px;
}

Also, it will make the animation every time, so you have to check if the element is hide 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 be sure to add jQuery and jQuery UI.

Here is a Demo working

Upvotes: 0

Related Questions