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

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