1

我目前有两个问题正在努力解决。我正在尝试使用 javascript 跳转到页面上的 ID（我喜欢 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。它位于左上角，在 Frameworks & Extensions 下。

于 2013-05-13T21:05:48.333 回答
0

我使用此脚本来完成您的工作，现在代码与您的类名不匹配，因此您必须更改它们，但这将滚动到底部然后顺利返回顶部。有关更多信息，请参阅Jsfiddle

 $('a').click(function(){
   $('html, body').animate({
    scrollTop: $( $(this).attr('href') ).offset().top
}, 1500);
   return false;
});
于 2013-05-13T21:06:39.653 回答
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 回答