Scrolling effect: Slow at first than it goes fast

Question

I'm trying to create a scrolling effect where when the onclick event is triggered, I want that div1 to scroll to dev2. It should initially go slowly and then fast!.

Here's a website using this effect: http://community.saucony.com/kinvara3/

How do I do this?

Take a look at bezier-curve css animation, for example http://demo.hongkiat.com/css-cubic-bezier/ — Mathijs Rutgers, Jun 26 '15 at 13:39
Yes Sudhansu thanks, though why i'm getting MINUS on my question ? — Michael, Jun 26 '15 at 19:32
well.. on SO all of us try to solve problems. Having said that, it is always appreciated that the owner of the problem tries searching for solutions first by himself/herself, tries solving the problem through coding(if it is required) and then posts his/her problem here. With this question, I feel many folks didn feel you had tried solving the problem by yourself as there was no description of what "x" effort you have put to achieve "y" solution. Thats about it. Do post what u have tried, what worked, what didn work etc from next time.. Cheers! — Sudhansu Choudhary, Jun 26 '15 at 21:57

Sudhansu Choudhary · Accepted Answer · 2015-06-26T17:43:01.987

$.fn.animateScrollDivs = function(sourceDiv, destinationDiv) {
  var source = '#' + sourceDiv;
  var destination = '#' + destinationDiv;

  $('html, body').animate({
    scrollTop: $(destination).offset().top
  }, 1200, 'easeInExpo');

};

function animateDiv(sourceDiv, destinationDiv) {

  $.fn.animateScrollDivs(sourceDiv, destinationDiv);

}

div {
  height: 650px;
  width: 1000px;
}
button {
  background-color: #FE2EF7;
}
.downButton {
  margin-top: 500px;
  margin-bottom: 40px;
  margin-right: 200px;
  margin-left: 200px;
}
.upButton {
  margin-top: 60px;
  margin-bottom: 500px;
  margin-right: 200px;
  margin-left: 200px;
}

<body>
  <div id="div1" style="background-color:red;">
    <button class="downButton" onclick="animateDiv('div1','div2');">Go Down</button>
  </div>
  <div id="div2" style="background-color:yellow;">
    <button class="upButton" onclick="animateDiv('div2','div1');">Go Up</button>
    <button class="downButton" onclick="animateDiv('div2','div3');">Go Down</button>
  </div>
  <div id="div3" style="background-color:grey;">
    <button class="upButton" onclick="animateDiv('div3','div2');">Go Up</button>
    <button class="downButton" onclick="animateDiv('div3','div4');">Go Down</button>
  </div>
  <div id="div4" style="background-color:#2E9AFE;">
    <button class="upButton" onclick="animateDiv( 'div4', 'div1');">GoToTop</button>
  </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js "></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js "></script>

Will this do?? Please adjust the position of button(s) as per your requirement.

I've used jQuery mmin (1.11) and jQuery UI (1.11).

Thank you Sudhansu it's just what i need, however is it possible to tell me which part of your code responsible for the "Slow" effect? — Michael, Jun 26 '15 at 19:25
its the jQuery animate function in combination with jQuery easing (present in jQuery UI.js). In `$('html, body').animate({ scrollTop: $(destination).offset().top }, 1200, 'easeInExpo');`, the `.animate()` function is responsible for doing the animation(obvious). If you observe, the first parameter is the handler, second one is the time duration needed for animation(1200 ms here) and third one does the fancy trick of slow to fast scrolling. Change parameters here, experiment and choose what fits you, http://matthewlein.com/experiments/easing.html Choose time and easing type — Sudhansu Choudhary, Jun 26 '15 at 19:38

score 0 · Answer 2 · answered Jun 26 '15 at 17:49

Make use of ScrollTop with offset().top to scroll it to DIV nodes.

HTML

Do add a "active" class on DIV item which you want to show at first on page load. For me, it's the first DIV item.

<button class="giu">Animate To Next available List Item</button>

<div class="product active" id="product1">1</div>
<div class="product" id="product2">2</div>
<div class="product" id="product3">3</div>
<div class="product" id="product4">4</div>

JavaScript

$('.giu').click(function(event) {
    event.preventDefault();
    var n = $(window).height();
    $('div.active').removeClass('active').next('div').addClass('active');
    $('body').animate({
        scrollTop: $(".product.active").offset().top
    }, 500);
});

Fiddle - http://jsfiddle.net/ideaovation/fhg1g974/3/

Thanks lokesh but it's not what i need , it doesn't have the "Slow" than fast effect. — Michael, Jun 26 '15 at 19:26

Scrolling effect: Slow at first than it goes fast

2 Answers2

Linked