15

この機能にイージング/アニメーション/ゆっくり移動を追加するにはどうすればよいですか？現時点ではジャンプするだけです。これで、アニメーションで「アンカー」に移動するはずです。

<script type='text/javascript'>
        setTimeout("window.scrollBy(0,270);",3000);
</script>
4

8 に答える 8

44

リクエストアニメーションフレームを使用したプレーンJavaScriptでも可能です。

// first add raf shim
// http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();

// main function
function scrollToY(scrollTargetY, speed, easing) {
    // scrollTargetY: the target scrollY property of the window
    // speed: time in pixels per second
    // easing: easing equation to use

    var scrollY = window.scrollY,
        scrollTargetY = scrollTargetY || 0,
        speed = speed || 2000,
        easing = easing || 'easeOutSine',
        currentTime = 0;

    // min time .1, max time .8 seconds
    var time = Math.max(.1, Math.min(Math.abs(scrollY - scrollTargetY) / speed, .8));

    // easing equations from https://github.com/danro/easing-js/blob/master/easing.js
    var PI_D2 = Math.PI / 2,
        easingEquations = {
            easeOutSine: function (pos) {
                return Math.sin(pos * (Math.PI / 2));
            },
            easeInOutSine: function (pos) {
                return (-0.5 * (Math.cos(Math.PI * pos) - 1));
            },
            easeInOutQuint: function (pos) {
                if ((pos /= 0.5) < 1) {
                    return 0.5 * Math.pow(pos, 5);
                }
                return 0.5 * (Math.pow((pos - 2), 5) + 2);
            }
        };

    // add animation loop
    function tick() {
        currentTime += 1 / 60;

        var p = currentTime / time;
        var t = easingEquations[easing](p);

        if (p < 1) {
            requestAnimFrame(tick);

            window.scrollTo(0, scrollY + ((scrollTargetY - scrollY) * t));
        } else {
            console.log('scroll done');
            window.scrollTo(0, scrollTargetY);
        }
    }

    // call it once to get started
    tick();
}

// scroll it!
scrollToY(0, 1500, 'easeInOutQuint');
于 2014-11-07T09:44:50.157 に答える
17

2019年にこの質問を表示する人のために：これは、を使用してネイティブに実行できるようになりました

window.scrollBy({
    top: 0,
    left: 270,
    behavior: 'smooth'
});

これは、エッジとサファリを除くすべての主要なブラウザで機能します。https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollBy#Examplesを参照してください

于 2019-08-23T18:00:05.207 に答える
12

この答えから適応：

function scrollBy(distance, duration) {

    var initialY = document.body.scrollTop;
    var y = initialY + distance;
    var baseY = (initialY + y) * 0.5;
    var difference = initialY - baseY;
    var startTime = performance.now();

    function step() {
        var normalizedTime = (performance.now() - startTime) / duration;
        if (normalizedTime > 1) normalizedTime = 1;

        window.scrollTo(0, baseY + difference * Math.cos(normalizedTime * Math.PI));
        if (normalizedTime < 1) window.requestAnimationFrame(step);
    }
    window.requestAnimationFrame(step);
}

これにより、指定した距離だけスムーズにスクロールできるようになります。

于 2017-06-11T13:06:05.100 に答える
2

jQueryの別の例では、いくつかの優れた効果のためにイージングプラグインを使用しています。

http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizo​​ntal-page-scrolling-with-jquery/

于 2012-08-30T15:19:39.537 に答える
2

自分で手に入れました。wordpressとjquery.noConflictモードのため、コードを変更する必要がありました。

<script type="text/javascript">
        (function($){
        $(document).ready(function(){
            setTimeout(function() {
            $('body').scrollTo( '300px', 2500 );
        }, 3000);
        });
        }(jQuery));
</script>

みんなありがとう!!!

于 2012-09-03T14:41:54.720 に答える
2

これは機能します。ページの上部までスムーズにスクロールする必要があると仮定します。

const scrollToTop = () => {
  const c = document.documentElement.scrollTop || document.body.scrollTop;
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    window.scrollTo(0, c - c / 8);
  }
};
于 2019-06-14T12:37:27.797 に答える
1

jQueryを使用する場合、 .animate関数を簡単に使用できます。

これがどのように機能するかの例です。

于 2012-08-30T14:44:11.773 に答える
0

jQueryを使用すると、おそらくscrolltoプラグインを使用すると、これがはるかに簡単になります。http://flesler.blogspot.se/2007/10/jqueryscrollto.html

次のような解決策を検討してください。

<script type='text/javascript' src='js/jquery.1.7.2.min.js'></script>
<script type='text/javascript' src='js/jquery.scrollTo-min.js'></script>
<script type='text/javascript' src='js/jquery.easing.1.3.js'></script><!-- only for other easings than swing or linear -->
<script type='text/javascript'>
$(document).ready(function(){
    setTimeout(function() {
    $('html,body').scrollTo( {top:'30%', left:'0px'}, 800, {easing:'easeInBounce'} );
}, 3000);
});
</script>

もちろん、スクリプトをdlする必要があります。

実用的な例については、http：//jsfiddle.net/7bFAF/2/を参照してください。

于 2012-08-30T14:42:03.953 に答える