平滑滚动到顶部不起作用

Question

I am making a div which on press sends the user to the top but with a smooth scroll. I am able to send it to the top but not with the smooth scroll.

My code is below

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script>
      $(document).ready(function(){
            $('#footer a').click(function () {
            $('body,html').animate({scrollTop:0},1000);
      return false;
      };
      }

</script>

Answer 1

You made some mistakes in the syntax. Try this:

$(document).ready(function() {
    $('#footer a').click(function(){
         $("html, body").animate({ scrollTop: 0 }, 1000);
         return false;
    });
});

The scrollTop:0 scrolls to the very top of the page, at 0px position, and the 1000 represents the duration of animation in milliseconds. The Higher values indicate slower animations. You can also use 'fast', 'slow' or 'normal' instead of milliseconds.

Answer 2

I'm not sure why your code works at all. Your code is missing a ) and ); . Also I haven't tested with such an old version of jQuery.

See:

$(document).ready(function() {
      $('#footer a').click(function () {
          $("body").animate({scrollTop:0},1000);
      });
});

http://jsfiddle.net/4SV75/

Answer 3

The problem is that your javascript is missing some closing parenthesis ) . Here is the fixed version I used:

  $(document).ready(function(){
      $('#footer a').click(function (event) {
          $('body,html').animate({scrollTop:0},1000);
          event.preventDefault();
      });
  });

jsfiddle: http://jsfiddle.net/tAbqW/

The reason it is sending you to the top is most likely you used href='#' , which will send you to the top even with no javascript.