动画回到顶部按钮

Question

我有一个返回顶部的按钮，该按钮在滚动时的某些点逐渐消失。 我希望更改脚本，以便使按钮向左滑动50px然后向右滑动-50px而不是淡入淡出； （屏幕外）

这是我淡入淡出的代码：

var offset = 220;
var duration = 500;

$(window).scroll(function() {
    if (jQuery(this).scrollTop() > offset) {
        $('.back-to-top').fadeIn(duration);
    } else {
        $('.back-to-top').fadeOut(duration);
    }
});

$('.back-to-top').click(function(event) {
    event.preventDefault();
    $('html, body').animate({scrollTop: 0}, duration);
    return false;
})

我尝试了这个，但对我不起作用：

var offset = 220;
var duration = 500;

$(window).scroll(function() {
    if (jQuery(this).scrollTop() > offset) {
        $('.back-to-top').animate({ "left": "+=50px" }, duration );
    } else {
        $('.back-to-top').animate({ "right": "+=50px" }, duration );
    }
});

任何帮助将不胜感激。

Answer 1

怎么这个：-

var offset = 220;
var duration = 500;

$(window).scroll(function() {
    if (jQuery(this).scrollTop() > offset) {
        $('.back-to-top').animate({ "right": "+100px" }, duration );
    } else {
        $('.back-to-top').animate({ "left": "0px" }, duration );
    }
});

Answer 2

尝试这个...

$(window).scroll(function() {
    if (jQuery(this).scrollTop() > offset) {
      $('.back-to-top').animate({"left":"-50px"}, "slow").removeClass('visible');
 }  else {
      $('.back-to-top').animate({"left":"50px"}, "slow").addClass('visible');
 }
});   

或者您可以使用基于jquery用户界面的示例。

$('.back-to-top').hide('slide', {direction: 'left'}, 1000);