scrollTop'返回頂部'按鈕不會淡入/淡出

我使用下面的代碼顯示隱藏的div（返回頂部按鈕），一旦用戶向下滾動500px。它工作正常，但我遇到的問題是該按鈕不會淡入，也不會淡出。scrollTop'返回頂部'按鈕不會淡入/淡出

//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>

來源

2014-09-24 J82

ma小提琴和更新您的文章 – 2014-09-24 14:41:56

好吧，我是一個實際的人，所以我打算給你一個實用的答案。顯然:hidden元素上的筆名和true屬性的stop()函數似乎是導致此問題的原因。刪除它們似乎解決了這個問題。另外，如果我正確理解您的問題，我相信您的scrollTop應該是相反的方法。

下面是我創建的一個測試;希望這會幫助你達到這個目的。

$('.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); 
 
    } 
 
});

<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>

這裏，它是對的jsfiddle，這樣你就可以申請修改，如果你想用它玩：http://jsfiddle.net/aefvamrg/

來源

2014-09-24 14:45:37 webeno

這是我使用..

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>

來源

2014-09-24 14:47:43 Marty

scrollTop'返回頂部'按鈕不會淡入/淡出

回答

相關問題