javascript - 优化 Jquery 动画

标签 javascript jquery html animation

因此,我正在寻找优化 Jquery .animate(scrollTo:value) 函数的最佳方法。举个例子:

$('#returnToTop').on('click', function(){
        $('html, body').animate({
            scrollTop: 0
        }, 'slow');
    });

这里有一个 div,它充当“顶部”按钮,单击该按钮时,会将页面滚动回顶部。现在在复杂的页面上,这相当生涩且不流畅。我想知道是否有任何 jQuery 忍者可以启发我们 animate 函数到底是做什么的。在简单的页面上,它非常漂亮和流畅。

现在,我假设它可能会执行一些遍历 DOM 的计算,因此当它很复杂时,它需要一段时间并且看起来很不稳定。这就是问题的核心:

作为开发人员,我们可以采取哪些措施来为 jQuery 提供精确的参数,使其计算更简单,从而使动画更流畅。可能有一些重要的特定值,如果提供的话,将提供显着的加速。

有人有见解吗?

谢谢。

最佳答案

对于 jQuery,“慢”是一段时间(准确地说是 600 毫秒)。如果是大页面,需要600ms跳转到顶部。

如果您想以与页面高度无关的恒定速度制作此动画,请将持续时间设置为 t = offsetTop/k 每秒行走大约 k 像素,其中 offsetTop 类似于 $(clickedElement).offset().top.

jQuery 也有一些插件可以直接完成它。

关于javascript - 优化 Jquery 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11403319/

相关文章:

html - CSS 子菜单,在错误的位置弹出

javascript - JavaScript 变量可以除法吗?

javascript函数名称后的两个括号

javascript - React setState 不立即更新组件 View

jquery - 在 javascript/php 中移动单引号

html - HTML 中输入标签的高度

javascript - IntersectionObserver iOS 和 Safari

javascript - 如何修复 array.length 更改?

jquery - 获取多个同名字段的 JSON 格式的表单数据

jquery - 如何在jquery mobile中的ajax请求后用后退按钮覆盖左侧的 "Menu"按钮?