Question

当用户向下滚动页面时，我会显示一个div（您单击它并将其发送回页面顶部）。目前它只是淡入淡出，但我希望它从页面的右侧滑入。

这是我目前的代码：

Jquery的：

<div class="toTop">
Back to the top
</div>
<script>
  $(window).scroll(function() {
    if ($(this).scrollTop()) {
        $('.toTop').fadeIn();
    } else {
        $('.toTop').fadeOut();
    }
});
</script>

CSS：

.toTop {
    padding: 10px;
    background: rgb(55,161,222);
    color: #fff;
    position: fixed;
    bottom: 50%;
    right: 0px;
    display: none;
    z-index:1000;
    text-transform:uppercase;
    font-weight:600;
}

你也可以看到我在这里做的事情： http://www.samskirrow.com/client-hope

Answer 1

摆脱display:none。

设置right:-200px并使用.animate({ right: 0px })代替.fadeIn()和.animate({ right: -200px })代替fadeOut()。

将您的if语句更改为if ($(this).scrollTop() > 100)。这是因为scrollTop()函数将当前滚动位置从顶部返回为多个像素。

Answer 2

将$('.toTop').fadeIn();替换为.animate({"right":"-50px"}, "slow");

页面滚动上的动画div位置

2 个答案: