jQuery动画滚动到视口顶部

Question

我正在为电子商务网站创建一个产品页面，页面顶部有一个固定的栏和购物篮。页面上有很多商品，因此有很多“添加到购物篮”的按钮。

我需要将“添加到购物篮”按钮飞到固定栏中的购物篮。目前，我已经成功让框在单击时出现在所需位置，但动画没有过渡效果。我猜想这可能是因为我将对象转换为position:fixed;。

这是我目前的代码示例.. 希望你能帮忙！

http://jsfiddle.net/d7tHU/

$('.addToCart').click(function(){
    $(this).css('position','fixed');
    $(this).animate({
        top: '0px',
        right:'0px'
    }, "slow");

});

- Dan Johnson

Answer 1

一种使用 transition 属性，更少依赖于 JavaScript 的 CSS 解决方案： http://jsfiddle.net/d7tHU/10/

- Matthew Shine

Answer 2

我猜您想要的是这个 'http://jsfiddle.net/d7tHU/11/'。

$('.addToCart').click(function(){
    $(this).css('position','absolute');
    $(this).animate({
        top: -$(this).offset().top+'px',
        left: ($('#basket').offset().left - $('#basket').width()) +'px'
    }, "slow", function(){
        $(this).hide().appendTo('#basket')
           .css({position:'static', float:'right'})
           .fadeIn()
           .off('click');
        $('.price').html(parseFloat($('.price').html())+12.5);
    });    
});

HTML 小改动:

<div id='header'>
    <div id='basket'>
        <span style="padding-right:10px">Price: <span class="price">0</span>€</span>
    </div>
</div>

- João Pinho

---

它有一个问题，就是仍然无法将它们保持在顶部。我正在努力解决这个问题。 - João Pinho

这差不多是我想要的，但你代码的问题在于如果我向下滚动然后点击一个按钮，它就不会出现在正确的位置！ - Dan Johnson

是的，我正在为您修复它。 - João Pinho

非常感谢！！非常感激。 - Dan Johnson

我更新了代码，现在它甚至可以更新一个假设的价格字段，并且“产品”被添加到购物篮元素中...更有意义。 - João Pinho

Answer 3

我为您准备了一个可用版本，链接在这里http://jsfiddle.net/ZET98/。

我所做的是将 margin-top 和 margin-left 的位置更改为 top 和 right。

我还修改了您的JavaScript代码，使其在单击父元素时进行动画处理，并更新 top CSS 值。

$( ".addToCart").parent()
.click(function() {
  $(this)
  .css({
      position:'fixed',
      top: $(this).offset().top - $(window).scrollTop()+'px'
  })
  .animate({
    right: $(this).children('.addToCart').outerWidth()+'px',
    top:"0",
  });
});

- Shawn G.

---

我在将其应用到我的页面时遇到了困难，因为按钮的定位方式与我在jsFiddle中的方式不同。但是，在您的帮助下，最终我还是解决了这个问题。谢谢！ - Dan Johnson

抱歉实现过程中有些麻烦，但很高兴你最终让它工作了！ - Shawn G.

Answer 4

我认为这可能会引导你朝着正确的方向前进。

http://jsfiddle.net/y7W4N/12/

你的目标是内部div，而你需要移动的是父级元素，所以应该选择父级元素作为目标，如$( ".addToCart").parent()。

此外，你的脚本正在改变位置，比如左侧，但你有一个margin-left...，所以只需在top和left等方面进行调整即可。

编辑 更好的版本http://jsfiddle.net/b5Uux/ <- 错误的链接，这个才是更好的。

http://jsfiddle.net/b5Uux/1/

- Ant

---

你可以将 right 属性设置为 $(this).children('.addToCart').outerWidth()+'px' 来实现让其贴着 #basket 边缘的动画效果。 - Shawn G.

谢谢，已经包含了类似的东西。 - Ant