Question

一旦用户向下滚动500px，我就会使用下面的代码显示隐藏的div（返回顶部按钮）。它工作正常，但我遇到的问题是按钮不会淡入，也不会淡出。

//Back to top
$('.back-to-top').click(function(){
    $('html, body').animate({scrollTop : 0},800);
    return false;
});

$(window).scroll(function() {
    if ($(this).scrollTop() > 500) {
        $('.back-to-top:hidden').stop(true, true).fadeIn(500);
    } else {
        $('.back-to-top').stop(true, true).fadeOut(500);
    }
});

<a href="#" class="back-to-top" style="display:none"><img src="<?php bloginfo( 'stylesheet_directory' ); ?>/img/back_to_top.png" width="32"></a>

Answer 1

嗯，我是一个实用的人，所以我会给你一个实际的答案。显然，元素上的:hidden假名和true函数的stop()属性似乎导致了问题。删除它们似乎正在解决这个问题。另外，如果我能正确理解您的问题，我相信您对scrollTop的检查应该是相反的。

以下是我创建的测试;希望这能帮助你深究这一点。

＆＃13;

$('.back-to-top').click(function(){
    $('html, body').animate({scrollTop : 0},800);
    return false;
});

$(window).scroll(function() {
    if ($(this).scrollTop() <= 500) {
        $('.back-to-top').stop().fadeIn(500);
    } else {
        $('.back-to-top').stop().fadeOut(500);
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="back-to-top" style="position:fixed; top:0; border: 1px solid red">sadasdasd</a>
<div style="height:1000px; border: 1px solid #000">bla</div>

＆＃13;

这里是jsfiddle，所以如果你想玩它，你可以应用修改：http://jsfiddle.net/aefvamrg/

Answer 2

这就是我用的......

http://jsfiddle.net/1ktksqqs/

<style>
#back-top {
    position: fixed;
    bottom: 30px;
}
#back-top a {
    width: 108px;
    display: block;
    text-align: center !important;
    font: 11px/100% Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    color: #bbb;
    /* background color transition */
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}
#back-top a:hover {
    color: #000;
}
#back-top span {
    width: 108px;
    height: 108px;
    display: block;
    margin-bottom: 7px;
    background: #ddd url("http://4.bp.blogspot.com/-46DxhA_q6LE/UnI5YBGzCfI/AAAAAAAABP8/IC6g6GwkQlY/s1600/back-to-top+gray.png") no-repeat center center;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}
#back-top a:hover span {
    background-color: #777;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery("#back-top").hide();
    jQuery(function () {
        jQuery(window).scroll(function () {
        if (jQuery(window).scrollTop() > 400) {
                jQuery('#back-top').fadeIn();
        } else {
                jQuery('#back-top').fadeOut();
        }
    });
    // scroll body to 0px on click
    jQuery('#back-top a').click(function () {
        jQuery('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
    });
 });
 </script>
 <p id="back-top"><a href="#top"><span></span>Back to Top</a></p>

scrollTop＆＃39;回到顶部＆＃39;按钮不会淡入/淡出

2 个答案: