Question

这是HTML：

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

并且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;
        });
    });

});

如你所见，我使用折叠效果应用于显示功能但我使用的每个效果我看到相同的结果！

我应该犯一个愚蠢的错误但不幸的是我无法解决它！

Answer 1

下载另一个版本的jquery UI，其中包括＆＃34;效果＆＃34;函数（检查为true）来自jqueryui.com/download。

Answer 2

在该代码中，当您向下滚动时，您想要显示某些内容，对吧？但如果它位于页面顶部，您将看不到它。如果是这种情况，你应该像CSS一样添加这样的东西：

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

此外，它每次都会制作动画，所以你必须检查元素是否隐藏才能制作动画：

if ($(this).scrollTop() > 50) {
    if($('#back-top').css("display")=="none"){
         $('#back-top').show("fold", null, 500);
    }
} else {
   $('#back-top').hide("fold", null, 500);
}

请务必添加jQuery和jQuery UI。

这是Demo工作

Jquery显示效果不起作用

2 个答案: