Question

我正在尝试创建一个滚动到顶部按钮，当用户向下滚动页面时，该按钮会淡入。

我已经设法将按钮放在我想要的位置，以及使点击功能将我带到顶部。但是按钮会永久显示，不会淡入或淡出。

我有以下设置：

HTML

 <a class="scrollup" href="#">Scroll To Top</a>

这是放在div标签内的段落中。

的Javascript

<script type="text/javascript" src="../../../../jquery-1.11.0.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(window).scroll(function(){
    if (jQuery(this).scrollTop() > 100) {
        jQuery('.scrollup').fadeIn();
    } else {
        jQuery('.scrollup').fadeOut();
}
});
// scroll-to-top animate
jQuery('.scrollup').click(function(){
jQuery("html, body").animate({ scrollTop: 0 }, 600);
    return false;
});
});

CSS

.scrollup {
height: 50px;
width: 50px;
opacity:1.0;
padding:10px;
text-align:center;
background: #FFFFFF;
font-weight:bold;
color:#444;
text-decoration:none;
position:fixed;
top:75px;
right:40px;
}

如上所述，按钮永久存在，滚动后不会淡入，点击并转到页面顶部也不会淡出。

感谢您提供任何意见，以解决此问题。

Answer 1

您可以重构代码：

Demo Fiddle

CSS

.scrollup {
    height: 50px;
    width: 50px;
    opacity:0;
    padding:10px;
    text-align:center;
    background: #FFFFFF;
    font-weight:bold;
    color:#444;
    text-decoration:none;
    position:fixed;
    top:75px;
    right:40px;
    transition:opacity 1s ease-in;
}
.scrollup.visible {
    opacity:1;
}

的jQuery

jQuery(document).ready(function () {
    jQuery(window).scroll(function () {
        if (jQuery(this).scrollTop() > 100) {
            jQuery('.scrollup').addClass('visible');
        } else {
            jQuery('.scrollup').removeClass('visible');
        }
    });
    // scroll-to-top animate
    jQuery('.scrollup').click(function () {
        jQuery("html, body").animate({
            scrollTop: 0
        }, 600);
        return false;
    });
});

Answer 2

您应该将'.scrollup'设置为display：none;。
你的CSS会是这样的：

.scrollup {
height: 50px;
width: 50px;
opacity:1.0;
padding:10px;
text-align:center;
background: #FFFFFF;
font-weight:bold;
color:#444;
text-decoration:none;
position:fixed;
top:75px;
right:40px;
}

并使您的脚本像这样：

jQuery(document).ready(function($){

    jQuery(window).scroll(function() {

    if(jQuery(this).scrollTop() != 0) {
        jQuery(".scrollup").fadeIn("slow");    
    }

    else {
        jQuery(".scrollup").fadeOut("slow");
    }

  });

Answer 3

我猜你错过了一些参数。

var fit = 400;//how slow/fast you want the button to show. fade in time
var fot = 400;//how slow/fast you want the button to hide fade out time

<script type="text/javascript" src="../../../../jquery-1.11.0.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(window).scroll(function(){
    if (jQuery(this).scrollTop() > 300) {
        jQuery('.scrollup').fadeIn(fit );
    } else {
        jQuery('.scrollup').fadeOut(fot );
}
});
// scroll-to-top animate
jQuery('.scrollup').click(function(){
jQuery("html, body").animate({ scrollTop: 0 }, 600);
    return false;
});
});

我也改变了（jQuery（this）.scrollTop（）＆gt; 300 ）{ 如果工作正常，你可以将它改回100.

滚动到顶部按钮不会淡入/淡出

3 个答案:

Demo Fiddle