我正在尝试创建一个滚动到顶部的按钮,当用户向下滚动页面时该按钮会淡入。
我已经设法将按钮放在我想要的位置,并使点击功能将我带到顶部。无论按钮如何永久显示,它都不会淡入或淡出。
我有以下设置:
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;
}
如上所述,该按钮永久存在并且不会在我滚动后淡入,也不会在我单击并转到页面顶部时淡出。
感谢您提供解决此问题的任何意见。
最佳答案
您可以这样重构您的代码:
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;
});
});
关于jquery - 滚动到顶部按钮不淡入/淡出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23385470/