Scrolling effect: Slow at first than it goes fast

Question

Scrolling effect: Slow at first than it goes fast

2.8k Views Asked by Michael At 03 April 2025 at 06:32

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?

Original Q&A

There are 2 best solutions below

Lokesh Yadav On 26 June 2015 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/

**Sudhansu Choudhary** · Accepted Answer

$.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).

Scrolling effect: Slow at first than it goes fast

There are 2 best solutions below

Related Questions in CSS

Related Questions in HTML

Related Questions in SCROLL

Related Questions in PARALLAX

Trending Questions

Popular # Hahtags

Popular Questions