1

現在取り組んでいる問題が 2 つあります。ページ上の ID にジャンプするために JavaScript を使用しようとしています (JS が提供する遅いアニメーションが好きです)。私が使用しているjavascriptは機能していません。これが私が取り組んでいるものとのJSフィドルです：

http://jsfiddle.net/n6H8v/5/

コードは次のとおりです（HTMLが長くて申し訳ありませんが、スクロールのテストに使用する必要がありました）：

HTML:

<section id="thumbs-work">

    <img id="top-cat" src="images/cat.png">

        <p> /* Large amount of text to force scrolling */ </p>
</section>


    <div class="back-to-top back-to-top-left">
        <p><a>
        <span class="top-jump">BACK TO TOP</span><img src="images/cat.png" alt="back to top"></a></p>
    </div>

</div>

Javascript:

$( document ).ready(function() {
        $(".top-jump").click(function() {
                $("html, body").animate({ scrollTop: $("#top-cat").offset().top }, 1000);
                return true;
        });
});

どんな助けでも大歓迎です

4

3 に答える 3

1

JSFiddle に jQuery をロードしなかったためです。フレームワークと拡張機能の下の左上にあります。

于 2013-05-13T21:05:48.333 に答える
0

役立つかもしれないJavaScript関数を次に示します。

window.smoothScrollTo = (function () {
  var timer, start, factor;

  return function (target, duration) {
    var offset = window.pageYOffset,
        delta  = target - window.pageYOffset; // Y-offset difference
    duration = duration || 500;              // default 1 sec animation
    start = Date.now();                       // get start time
    factor = 0;

    if( timer ) {
      clearInterval(timer); // stop any running animations
    }

        function step() {
          var y;
          factor = (Date.now() - start) / duration; // get interpolation factor
          if( factor >= 1 ) {
            clearInterval(timer); // stop animation
            factor = 1;           // clip to max 1.0
          } 
          y = factor * delta + offset;
          window.scrollBy(0, y - window.pageYOffset);
        }

        timer = setInterval(step, 10);
        //document.getElementById("but").click();
        return timer;
      };
    }());
于 2014-03-20T15:53:05.780 に答える
0

このスクリプトを使用して、あなたがしていることを達成します。コードがクラス名と一致しないため、変更する必要がありますが、これは下にスクロールしてから上にスムーズに戻ります。詳細については、 Jsfiddleを参照してください

 $('a').click(function(){
   $('html, body').animate({
    scrollTop: $( $(this).attr('href') ).offset().top
}, 1500);
   return false;
});
于 2013-05-13T21:06:39.653 に答える