当您到达页面上的某个点时,我有一个返回顶部按钮,它工作正常,但是,当它出现时,文本在两行上,直到框完成动画显示。那么,有什么办法可以防止这种情况发生吗?我所说的动画是:btt.show('slow');
代码:
$(document).ready(function () {
var btt = $('.back-to-top');
btt.on('click' , function(e) {
$('html, body').animate({
scrollTop: 0
}, 500);
btt.hide('slow');
e.preventDefault();
});
$(window).on('scroll', function () {
var self = $(this),
height = self.height(),
top = self.scrollTop();
if (top > 500) {
btt.show('slow');
} else {
btt.hide('slow');
}
});
});
最佳答案
问题是由盒子的 width
动画引起的,我认为它可能更好地动画它的 position
,但是 - 更好 - 让我们使用CSS 动画!
$(window).on('scroll', function () {
if ($(window).scrollTop() >= 500) {
$(".button").addClass('show');
} else {
$(".button").removeClass('show');
}
});
#wrapper {
width: 100%;
height: 2000px;
}
.button {
position: fixed;
bottom: 50px;
right: -100px;
/* You might still need prefixes here. Use as preferred. */
transition: right 500ms;
}
.button.show {
right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="wrapper">
<div class="button">Here's my button!</div>
</div>
我已将您的按钮定义为默认隐藏,方法是给它一个 position
right: -100px
。当我们到达正确的滚动位置时,我们添加类 show
并触发由 CSS 而不是 javascript 执行的动画,因为我们有属性 的
定义 - 浏览器以这种方式完成繁重的工作。transition
属性>right
关于Javascript按钮出现动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29777203/