滚动效果：先慢后快

Question

我正在尝试创建一种滚动效果，当 onclick 事件被触发时，我希望 div1 滚动到 dev2。它应该先慢后快！

这是一个使用此效果的网站：http://community.saucony.com/kinvara3/

我该怎么做？

Answer 1

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

这样可以吗？？请根据您的要求调整按钮的位置。

我用过 jQuery mmin (1.11) 和 jQuery UI (1.11)。

Answer 2

使用带有 offset().top 的 ScrollTop 将其滚动到 DIV 个节点。

HTML

请在 DIV 项目上添加 "active" class，您希望在页面加载时首先显示该项目。对我来说，这是第一个 DIV 项。

<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/

滚动效果：先慢后快

Scrolling effect: Slow at first than it goes fast

html

css

scroll

parallax