链接隐藏，直到scrol使用jQuery

Question

我有一种回到顶部链接但是它表明即使在页面顶部

<a class="w-toplink active" href="#"><i class="fa fa-chevron-up"></i></a> 

我想它被隐藏，直到用户开始滚动页面 - 这可能吗？如果是这样，怎么样？

我尝试过的另一件事是试图做的事情是让链接改变悬停在不透明上，但它似乎并没有工作 - 任何人都可以看到我出错的地方。由于

CSS

.w-toplink { 
display: block; 
position: fixed; 
bottom: -50px; 
right: 30px; 
text-align: center; 
font-size: 14px; 
padding-top:15px; 
line-height: 50px; 
height: 30px; 
width: 50px; 
border-radius: 5px; 
opacity: 0; 
z-index: 100; 
-webkit-transition: background-color 0.3s, opacity 0.3s, bottom 0.3s; 
transition: background-color 0.3s, opacity 0.3s, bottom 0.3s; 
background-color: #333; 
background-color: rgba(0, 0, 0, 0.3); 
color: #fff; 
} 

.w-toplink.active { 
bottom: 30px; 
opacity: 0.7; 
} 

.w-toplink:hover { 
opacity: 0.7; 
} 

在此先感谢。

Answer 1

的jQuery：

$(window).scroll(function(){ 
    var scrollTop = $(window).scrollTop(), 
     $toplink = $('.w-toplink'); 

    if(scrollTop > 0){ 
     $toplink.addClass('active'); 
    } else{ 
     $toplink.removeClass('active'); 
     } 
}); 

CSS：

.w-toplink{opacity:0; transition: opacity 200ms ease-in;} 
    .w-toplink.active{opacity:0.7;} 
    .w-toplink:hover{opacity:1;} 

编辑我已经为你添加一些额外的代码。

1. .W-排名靠前被默认
2. 隐藏当成为0.7opacity用户滚动（通过类。主动）
3. 当用户悬停的链接，变得完全可见（不透明度：1 ）

Answer 2

听起来很有趣...

很可能你就干脆把用于滚动的事件监听。 这是在任何vanillaJS或jQuery的可能......

看到了更多关于滚动：https://api.jquery.com/scroll/

<a class="w-toplink active" href="#"><i class="fa fa-chevron-up"></i></a> 

（你已经在使用jQuery的CDN假设

<script type="text/javascript"> 
$("a.w-toplink").hide(); 
    $(window).scroll(function() { 
    $("a.w-toplink").css("display", "visible").fadeIn("slow"); 
}); 

$("a.w-toplink").hide(); 
 
$(window).scroll(function() { 
 
    $("a.w-toplink").show(); 
 
});

.w-toplink { 
 
display: block; 
 
position: fixed; 
 
bottom: 0; 
 
right: 30px; 
 
text-align: center; 
 
font-size: 14px; 
 
padding-top:15px; 
 
line-height: 50px; 
 
height: 30px; 
 
width: 50px; 
 
border-radius: 5px; 
 
z-index: 100; 
 
-webkit-transition: background-color 0.3s, opacity 0.3s, bottom 0.3s; 
 
transition: background-color 0.3s, opacity 0.3s, bottom 0.3s; 
 
background-color: #333; 
 
background-color: rgba(0, 0, 0, 0.3); 
 
color: #fff; 
 
}

<a href="#" class="w-toplink stuff">Back to to top</a> 
 

 

 

 
<p>Lorem Ipsum and stuff...Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff...Lorem Ipsum and stuff...Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff...Lorem Ipsum and stuff...Lorem 
 
    Ipsum and stuff...Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff... 
 
</p> 
 
<ul> 
 
    <li>Sample</li> 
 
    <li>Sample</li> 
 
    <li>Sample</li> 
 
    <li>Sample</li> 
 
    <li>Sample 
 
    <p>Lorem Ipsum and stuff...Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff...Lorem Ipsum and stuff...Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff...Lorem Ipsum and stuff...Lorem 
 
     Ipsum and stuff...Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff... 
 
    </p> 
 
    </li> 
 
    <li>Sample</li> 
 
    <li>Sample</li> 
 
    <li>Sample</li> 
 
    <li>Sample</li> 
 
    <li>Sample 
 
    <p>Lorem Ipsum and stuff...Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff...Lorem Ipsum and stuff...Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff...Lorem Ipsum and stuff...Lorem 
 
     Ipsum and stuff...Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff... 
 
    </p> 
 
    </li> 
 
    <li>Sample</li> 
 
    <li>Sample</li> 
 
    <li>Sample</li> 
 
    <li>Sample</li> 
 
    <li>Sample</li> 
 
    <li>Sample</li> 
 

 
    <li>Sample</li> 
 
    <li>Sample</li> 
 
    <li>Sample</li> 
 
</ul> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

。

</script> 

Answer 3

这样做：

$(window).scroll(function() { 
    if ($(this).scrollTop() > 0) { 
     $('.w-toplink').fadeIn(250); 
    } else { 
     $('.w-toplink').fadeOut(250); 
    } 
}); 

这添加到您的CSS文件：

.w-toplink { 
    display: none; 
}