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 UI的示例..像这样

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

动画返回顶部按钮

2 个答案: