如何实现元素从任意位置平滑动画至右上角？解决跳转问题

你的代码问题在于尝试在动画中修改position属性（从默认的static改为fixed），而CSS无法对position属性进行平滑过渡，导致元素直接跳转。要实现平滑移动，需要先将元素设置为fixed定位并记录当前位置，再动画修改top和right（或left）属性。

方法一：使用jQuery动画 #

直接通过jQuery的animate方法实现平滑移动：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>x</button>

$('button').click(function() {
  const $btn = $(this);
  // 获取按钮当前相对于视口的位置
  const offset = $btn.offset();
  const windowWidth = $(window).width();
  
  // 先将按钮设为fixed定位，保持当前位置
  $btn.css({
    position: 'fixed',
    top: offset.top - $(window).scrollTop(),
    left: offset.left,
    margin: 0 // 清除默认边距避免布局偏移
  });
  
  // 动画移动到右上角
  $btn.animate({
    top: 0,
    left: windowWidth - $btn.outerWidth()
  }, 2000);
});

方法二：使用CSS过渡 #

如果偏好CSS驱动的动画，可以结合JS设置初始位置：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>x</button>

.move-to-top-right {
  top: 0 !important;
  right: 0 !important;
  transition: top 2s ease, right 2s ease;
}

$('button').click(function() {
  const $btn = $(this);
  const offset = $btn.offset();
  const windowWidth = $(window).width();
  
  // 计算初始fixed定位的top和right值
  const initialTop = offset.top - $(window).scrollTop();
  const initialRight = windowWidth - offset.left - $btn.outerWidth();
  
  // 设置初始fixed位置
  $btn.css({
    position: 'fixed',
    top: `${initialTop}px`,
    right: `${initialRight}px`,
    margin: 0
  });
  
  // 触发浏览器重绘，确保初始状态生效
  void $btn[0].offsetWidth;
  
  // 添加类触发过渡动画
  $btn.addClass('move-to-top-right');
});

两种方法都能实现按钮从当前位置平滑移动到右上角的效果，核心是避免在动画中修改position属性，而是通过调整定位属性值实现过渡。

内容的提问来源于stack exchange，提问作者Simon Ferndriger