scrollTop动画没有jquery [英] scrollTop animation without jquery

问题描述

在jQuery中，我通常使用以下代码：

  $（'＃go-to-top'）click（function {）{
 $（'html，body'）。 animate（{scrollTop：0}，400）; 
 return false; 
}）; 
 

如何在不使用jQuery的情况下动画scrollTop？

解决方案

HTML：

  =scrollToTop（1000）;>< / button> 
  

1＃JavaScript（线性）： b


  function scrollToTop（scrollDuration）{
 var scrollStep = -window.scrollY /（scrollDuration / 15），
 scrollInterval = setInterval （）{
 if（window.scrollY！= 0）{
 window.scrollBy（0，scrollStep）; 
} 
 else clearInterval（scrollInterval）; 
} ，15）; 
} 
  

2＃JavaScript >

  function scrollToTop（scrollDuration）{
 const scrollHeight = window.scrollY，
 scrollStep = PI /（scrollDuration / 15），
 cosParameter = scrollHeight / 2; 
 var scrollCount = 0，
 scrollMargin，
 scrollInterval = setInterval（function（）{
 if（window.scrollY！= 0）{
 scrollCount = scrollCount + 1 ; 
 scrollMargin = cosParameter  -  cosParameter * Math.cos（scrollCount * scrollStep）; 
 window.scrollTo（0，（scrollHeight  -  scrollMargin））; 
} 
 else clearInterval ）; 
}，15）; 
} 
  

注意：

• 持续时间（以毫秒为单位）（1000ms = 1s）


• 第二个脚本使用cos函数。 示例曲线：

>

由于高额的选民，我重新检查我的代码我写了几年前，并试图优化它。此外，我在我的代码底部添加了一些数学解释。

UPDATE（缓入和退出）： b
$ b

要使用更平滑的幻灯片/动画，请使用requestAnimationFrame方法。
（大窗口上会出现一点口吃，浏览器必须重绘大区域）

  function scrollToTop（scrollDuration）{
 var cosParameter = window .scrollY / 2，
 scrollCount = 0，
 oldTimestamp = performance.now（）; 
 function step（newTimestamp）{
 scrollCount + = Math.PI /（scrollDuration /（newTimestamp  -  oldTimestamp））; 
 if（scrollCount> = Math.PI）window.scrollTo（0，0）; 
 if（window.scrollY === 0）return; 
 window.scrollTo（0，Math.round（cosParameter + cosParameter * Math.cos（scrollCount）））; 
 oldTimestamp = newTimestamp; 
 window.requestAnimationFrame（step）; 
} 
 window.requestAnimationFrame（step）; 
} 
 / * 
说明：
  -  pi是余弦间隔的长度/结束点（见上文）
  -  newTimestamp表示回调排队的当前时间由requestAnimationFrame开始触发。 
（有关详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame）
  -  newTimestamp  -  oldTimestamp等于持续时间
 
a * cos（bx + c）+ d | c沿着x轴平移= 0 
 = a * cos（bx）+ d | d沿着y轴平移= 1>只有正y值
 = a * cos（bx）+ 1 |沿着y轴的伸展= cosParameter = window.scrollY / 2 
 = cosParameter + cosParameter *（cos bx）| b沿x轴伸展= scrollCount = Math.PI /（scrollDuration /（newTimestamp  -  oldTimestamp））
 = cosParameter + cosParameter *（cos scrollCount * x）
 * / 
  

I'm trying to make an animated "scroll to top" effect without using jQuery.

In jQuery, I usually use this code:

$('#go-to-top').click(function(){ 
      $('html,body').animate({ scrollTop: 0 }, 400);
      return false; 
});

How do I animate scrollTop without using jQuery?

解决方案

HTML:

<button onclick="scrollToTop(1000);"></button>

1# JavaScript (linear):

function scrollToTop(scrollDuration) {
    var scrollStep = -window.scrollY / (scrollDuration / 15),
        scrollInterval = setInterval(function(){
        if ( window.scrollY != 0 ) {
            window.scrollBy( 0, scrollStep );
        }
        else clearInterval(scrollInterval); 
    },15);
}

2# JavaScript (ease in and out):

function scrollToTop(scrollDuration) {
const   scrollHeight = window.scrollY,
        scrollStep = Math.PI / ( scrollDuration / 15 ),
        cosParameter = scrollHeight / 2;
var     scrollCount = 0,
        scrollMargin,
        scrollInterval = setInterval( function() {
            if ( window.scrollY != 0 ) {
                scrollCount = scrollCount + 1;  
                scrollMargin = cosParameter - cosParameter * Math.cos( scrollCount * scrollStep );
                window.scrollTo( 0, ( scrollHeight - scrollMargin ) );
            } 
            else clearInterval(scrollInterval); 
        }, 15 );
}

Note:

• Duration in milliseconds (1000ms = 1s)
• Second script uses the cos function. Example curve:

Due to the high amount of up-voters, I rechecked my code I wrote a couple of years ago and tried to optimize it. Further more I added a little mathematical explanation at the bottom of my code.

UPDATE (ease in and out):

For a smoother slide/animation, done with the requestAnimationFrame method. (a little bit of stuttering happens on large windows, because the browser has to redraw a wide area)

function scrollToTop(scrollDuration) {
    var cosParameter = window.scrollY / 2,
        scrollCount = 0,
        oldTimestamp = performance.now();
    function step (newTimestamp) {
        scrollCount += Math.PI / (scrollDuration / (newTimestamp - oldTimestamp));
        if (scrollCount >= Math.PI) window.scrollTo(0, 0);
        if (window.scrollY === 0) return;
        window.scrollTo(0, Math.round(cosParameter + cosParameter * Math.cos(scrollCount)));
        oldTimestamp = newTimestamp;
        window.requestAnimationFrame(step);
    }
    window.requestAnimationFrame(step);
}
/* 
    Explanations:
    - pi is the length/end point of the cosinus intervall (see above)
    - newTimestamp indicates the current time when callbacks queued by requestAnimationFrame begin to fire.
      (for more information see https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame)
    - newTimestamp - oldTimestamp equals the duration

      a * cos (bx + c) + d                      | c translates along the x axis = 0
    = a * cos (bx) + d                          | d translates along the y axis = 1 -> only positive y values
    = a * cos (bx) + 1                          | a stretches along the y axis = cosParameter = window.scrollY / 2
    = cosParameter + cosParameter * (cos bx)    | b stretches along the x axis = scrollCount = Math.PI / (scrollDuration / (newTimestamp - oldTimestamp))
    = cosParameter + cosParameter * (cos scrollCount * x)
*/

这篇关于scrollTop动画没有jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！