0
$(document).ready(function() {
      $("#Wrapper").click(function () {
    var th = $(this);
    if (!th.hasClass('down')) {
        console.log("ret");
        th.addClass('down').stop(true).animate({
            "top": "50px"
        }, 1000, function() {
            $('body').scrollTop(th.height());
        });
    } else {
        console.log("sdffsdsff");
        th.removeClass('down').stop(true).animate({
            "top": "-400px"
        }, 1000, function() {
            $('body').scrollTop(th.scrollTop());
        });
    }
});

});

I have this jquery code for scroll from top to bottom and bottom to top when click on wrapper. this code works but i want this should scroll slowly from top tp bottom and bottom to top when click on "wrapper" div

this is my original fiddle

http://jsfiddle.net/HtTXB/9/

how to do that? further more suggestions improving animation really appreciated .Thanks in advance.

ankit gupta
  • 55
  • 9
  • To smoothly scroll has already been asked and answered. You may look at this similar question [Scroll smoothly to specific element on page](http://stackoverflow.com/questions/17722497/) I can see no difference to your question. – surfmuggle Dec 21 '14 at 10:08
  • it scroll suddenly i want scroll slowly.see fiddle – ankit gupta Dec 21 '14 at 10:09
  • when click on "wrapper" div it should scroll slowly and smoothly. – ankit gupta Dec 21 '14 at 10:20
  • lets say after click on "wrapper" div .In 1 second scroll to half of the page and in 2 second scroll to bottom of the page.? – ankit gupta Dec 21 '14 at 10:25
  • Is there any reason you are manipulating the offset `top` property? The element is floated, and position is not set to relative so it will not work. – Terry Dec 21 '14 at 10:25
  • my question s pretty simple how to scroll smoothly and slowly from top to bottom when click on red area that is "wrapper" and bottom to top again click on that red area "wrapper" ? see my fiddle – ankit gupta Dec 21 '14 at 10:33

1 Answers1

2

What you currently do is animating the position of the wrapper itself, which you can't see, and when this animation is done, you jump to "top/bottom". You should animate the scrolling, not the position:

$(document).ready(function() {
  $("#Wrapper").click(function () {
    var th = $(this),
        toSCroll = $('html,body');
    if (!th.hasClass('down')) {
      // animate the scrolling for body/html
      toScroll.stop(true).animate({
        scrollTop: th.height()
        }, 1000, function() {
          // add class when ani is done
          th.addClass('down');
        });
    } else {
      toScroll.stop(true).animate({
        scrollTop: th.get(0).offsetTop /* or 0 for page top*/
      }, 1000, function() {
        th.removeClass('down');
      });
    }
  });
});

Fiddle is here.

axel.michel
  • 5,764
  • 1
  • 15
  • 25